
スキルアップ
2021.01.22
家でできる仕事おすすめ13選!趣味やスキルを活かして時間を有効活用
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
jQuery
2018.10.16
jQuery の select メソッドは、テキストボックスやテキストエリア内の文字を選択したり 文字が選択された際にイベントを発生させたりすることができるメソッドです。
今回は、jQuery の select メソッドの使用方法について紹介します。
1.select メソッド
2.select メソッドでテキストを選択
3.select メソッドでイベント発生
select メソッドは、text タイプの input 要素と textarea 要素について、要素内のテキストを選択したり、テキストが選択された際にイベントを発生させたりするメソッドです。
select メソッドは、 次のように記述して使用します。
$(セレクタ).select( );
$(セレクタ).select( handler( eventObject ) );
$(セレクタ).select( [ eventData ], handler( eventObject ) );
引数なしの「 .select( ) 」は、「 .trigger(“select”) 」の省略形です。
(trigger メソッドの使用方法についてはjQuery【 trigger 】手動でイベントを発生させる trigger メソッドをご参照下さい。)
また、「 .select( handler( eventObject ) ) 」及び「 .select( [ eventData ], handler( eventObject ) ) 」は、「 on( “select”, handler ) 」の省略形です。
(on メソッドの使用方法についてはjQuery【 on 】on メソッドの使い方をご参照下さい。)
引数の内容は以下の通りです。
.select( handler( eventObject ) )
handler( eventObject ) テキスト選択時に実行する処理を関数として指定
.select( [ eventData ], handler( eventObject ) )
[ eventData ] イベントハンドラに渡すデータをマップ値で指定 handler( eventObject ) テキスト選択時に実行する処理を関数として指定
select メソッドを使用して、入力欄のテキストを選択します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn1").on("click", function(e) { $("#txt1").select(); }); $("#btn2").on("click", function(e) { $("#tarea1").select(); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="button" id="btn1" value="テキストボックス"> <input type="button" id="btn2" value="テキストエリア"> <input type="text" id="txt1" value="テキストボックス"> <textarea id="tarea1">テキストエリア テキストエリア テキストエリア テキストエリア テキストエリア テキストエリア</textarea> </div>
選択対象となる要素を指定して 引数なしの select メソッドを呼び出すと、入力欄内のテキストが選択されます。
select メソッドの使用方法とは直接関係ありませんが、上のサンプルでは テキストエリア内の改行に「 」を使用しています(ブラウザによりますが、Google Chrome では <br> や /n は改行コードではなく文字として認識されます)。
今度は、入力欄のテキストを選択した時にイベントを発生させます。
Ctrl キー + A キー( Mac では command キー + A キー )で、各入力欄のテキストを選択してみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#txt2").select(function () { $("#out1").text("テキストボックス内のテキストが選択されました!").css("color","blue"); }); $("#tarea2").select(function () { $("#out1").text("テキストエリア内のテキストが選択されました!").css("color","red"); }); }); //--> </script> <div style="background-color:#CCC; padding:20px;"> <input type="text" id="txt2" value="テキストボックス"> <textarea id="tarea2">テキストエリア テキストエリア テキストエリア</textarea> <span id="out1"> </span> </div>
「 $(“#txt2”).select(function () {…}); 」のように select メソッドの引数内に処理内容を記述すると、入力欄内のテキストが選択された際に処理が実行されます。
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
スキルアップ
2021.01.20
本記事では、料金重視でプログラミングスクールを探している方向けに、未経験からエンジニアを目指せるおすすめのコースを紹介します。無料プログラミングスクールの仕組みや、かかる費用に差が出る理由、料金以外に重視すべきポイントも […]
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
INTERNOUS,inc. All rights reserved.