jQuery API の select() は、セレクトイベントを実行するメソッド。セレクトイベント時の、ブラウザのデフォルト動作と、select( fn )などでバインドしたイベントハンドラを実行する。セレクトイベントとは、テキスト入力欄<input type=”text”>やテキストエリア<textarea>におけるテキストを選択するイベントのこと。
「A要素のイベント時に、B要素のセレクトイベントを実行させたい」時などに便利だ。
記述方法
jQuery( セレクター ) . select();
「セレクター」の要素のセレクトイベントを実行する。
実装例(サンプル)
実装例(サンプル)の動作について
「select()」ボタンをクリックすると、テキスト入力欄のテキストを全て選択する。
テキスト入力欄内のテキストを選択すると、テキスト入力欄の右側に、「選択しました♪」と表示し、3秒でフェードアウトする。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select' ) . click( function() {
jQuery( '#jquery-api-input' ) . select();
} );
jQuery( '#jquery-api-input' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-input-text' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-select' ) . click( function() {
jQuery( '#jquery-api-input' ) . select();
} );
jQuery( '#jquery-api-input' ) . select( function() {
var str = ' 選択しました♪';
jQuery( '#jquery-api-input-text' ) . text( str ) . show() . fadeOut( 3000 );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-input {
margin: 0;
}
-->
</style>
<!--
#jquery-api-input {
margin: 0;
}
-->
</style>
HTML
<p>
<button id="jquery-api-select">select()</button>
</p>
<p>
<input id="jquery-api-input" type="text" value="テキスト入力欄のテキスト" />
<span id="jquery-api-input-text"></span>
</p>
<button id="jquery-api-select">select()</button>
</p>
<p>
<input id="jquery-api-input" type="text" value="テキスト入力欄のテキスト" />
<span id="jquery-api-input-text"></span>
</p>