jQuery API の select( fn ) は、セレクトイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
テキスト入力欄<input type=”text”>やテキストエリア<textarea>におけるテキストを選択するたびに、select( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . select( イベンドハンドラ );
「セレクター」の要素のセレクトイベントに、「イベンドハンドラ」をバインド。
実装例(サンプル)①
実装例(サンプル)①の動作について
テキスト入力欄内のテキストを選択すると、テキスト入力欄の右側に、「選択しました♪」と表示し、3秒でフェードアウトする。
実装例(サンプル)①のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-select-text' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-select-text' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
HTML
<p><input id="jquery-api-select" type="text" value="テキスト入力欄のテキスト" /><span id="jquery-api-select-text"></span></p>
実装例(サンプル)②
実装例(サンプル)②の動作について
テキストエリア内のテキストを選択すると、テキストエリアの右側に、「選択しました♪」と表示し、3秒でフェードアウトする。
実装例(サンプル)②のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select-2' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-select-text-2' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select-2' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-select-text-2' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
HTML
<p><textarea id="jquery-api-select-2" type="text">テキストエリアのテキスト</textarea><span id="jquery-api-select-text-2"></span></p>