ITコラム

jquery select

jQuery

2018.10.16

jQuery【 select 】テキストが選択された際のイベント

jQuery の select メソッドは、テキストボックスやテキストエリア内の文字を選択したり 文字が選択された際にイベントを発生させたりすることができるメソッドです。
今回は、jQuery の select メソッドの使用方法について紹介します。

目次

1.select メソッド
2.select メソッドでテキストを選択
3.select メソッドでイベント発生

1.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 )
テキスト選択時に実行する処理を関数として指定

▲目次へ戻る

 

2.select メソッドでテキストを選択

 
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">テキストエリア&#13;テキストエリア&#13;テキストエリア&#13;テキストエリア&#13;テキストエリア&#13;テキストエリア</textarea>
</div>

選択対象となる要素を指定して 引数なしの select メソッドを呼び出すと、入力欄内のテキストが選択されます。

select メソッドの使用方法とは直接関係ありませんが、上のサンプルでは テキストエリア内の改行に「 &#13; 」を使用しています(ブラウザによりますが、Google Chrome では <br> や /n は改行コードではなく文字として認識されます)。

▲目次へ戻る

 

3.select メソッドでイベント発生

 
今度は、入力欄のテキストを選択した時にイベントを発生させます。
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">テキストエリア&#13;テキストエリア&#13;テキストエリア</textarea>
  <span id="out1"> </span>
</div>

「 $(“#txt2”).select(function () {…}); 」のように select メソッドの引数内に処理内容を記述すると、入力欄内のテキストが選択された際に処理が実行されます。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.