select()

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>

CSS

<style type="text/css">
<!--
#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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, フォーム, フォーム・イベント パーマリンク