
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.10.02
jQuery の focus メソッドを使うと、指定した要素にフォーカスを当てたり フォーカスが当たった際にイベントを発生させることができます。
今回は、jQuery の focus メソッドの使用方法について紹介します。
1.focus メソッド
2.focus で特定の要素にフォーカスを当てる
3.focus と blur でフォーカスが当たった際の処理を実装
focus メソッドは、特定の要素にフォーカスを当てたり フォーカスが当たった際にイベントを発生させたりするメソッドです。
focus メソッドは、引数によって 3 通りの記述方法があります。
$(セレクタ).focus( );
$(セレクタ).focus( handler( eventObject ) );
$(セレクタ).focus( [ eventData ], handler( eventObject ) );
引数なしの「 .focus( ) 」は、「 .trigger(“focus”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
また、「 .focus( handler( eventObject ) ) 」及び「 .focus( [ eventData ], handler( eventObject ) ) 」は、「 on( “focus”, handler ) 」の省略形です。
(on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。)
focus メソッドの引数の内容は、それぞれ以下の通りです。
.focus( handler( eventObject ) )
handler( eventObject ) イベント発生時に実行する処理を関数として指定
.focus( [ eventData ], handler( eventObject ) )
[ eventData ] イベントハンドラに渡すデータをマップ値で指定 handler( eventObject ) イベント発生時に実行する処理を関数として指定
focus メソッドを使用して、特定の要素にフォーカスを当てます。
focus ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function() { $("#txt1").focus(); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn1" value="focus"> <input type="text" id="txt1"> </div>
「 $(“#txt1”).focus(); 」のように、フォーカスを当てたい要素を指定して 引数なしの focus メソッドを記述すると、フォーカスを当てることができます。
上のサンプルは 動きを分かりやすくするために ボタンをクリックしたタイミングでフォーカスを当てていますが、「 $(“#btn1”).on(“click”, function() {…}); 」を記述せずに「 $(“#txt1”).focus(); 」のみを記述すると、ページが読み込まれた時点でフォーカスが当たります。
focus と blur を使用して、特定の要素にフォーカスが当たった際の処理を実装します。
次の 2 つのテキストボックスにフォーカスを当ててみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#txt2").focus(function(){ $(this).css("background-color","#blue"); }).blur(function(){ $(this).css("background-color","#EEE"); }); $("#txt3").focus(function(){ $("#spn1").html("感想をご記入下さい"); }).blur(function(){ $("#spn1").html(" "); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="text" id="txt2"> <input type="text" id="txt3"> <span id="spn1"> </span> </div>
focus メソッドでフォーカスが当たった際の処理を記述することができますが、同様に blur メソッドを使用すると フォーカスが外れた際の処理を記述することができます。
「 $(“#txt3”).focus(function(){…}).blur(function(){…}); 」のように記述して 一連のフォーカスイベントを実装することができます。
上のサンプルでは、上のテキストボックスにフォーカスが当たった際に「 $(this).css(“background-color”,”#blue”); 」として テキストボックスの背景色が青になるように記述しています。
フォーカスが外れた際には「 $(this).css(“background-color”,”#EEE”); 」として 元の背景色に戻るように記述しています。
下のテキストボックスに関しては、フォーカスが当たった際に「 $(“#spn1”).html(“感想をご記入下さい”); 」として 指定したエリアに注意書きのテキストが表示されるようにしています。
フォーカスが外れた際には「 $(“#spn1”).html(“ ”); 」として 表示されたテキストを非表示にしています。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.