select/JavaScript

selectの使い方

　selectは、テキスト入力欄で文字が選択された時に処理を実行出来ます。

　以下は、例です。

<form>
<input type="text" value="ここを選択" id="test-select1">
</form>

<script>
var x1 = document.getElementById("test-select1");
x1.addEventListener("select", function(){alert("テストです");}, false);
</script>

　赤字部分でselectイベントを登録しています。無名関数で直接alertを記述していますが、func1等と関数を呼び出す事も出来ます。

　実行例は、以下の通りです。

　「ここを選択」という所でマウスをクリックしながら左右に動かすと、文字を選択した状態になります。その状態でマウスを離すとアラートが表示されます。

　又、テキスト入力欄をマウスで選択した後、Shiftキーを押しながら左右の矢印キーを押す事でも文字を選択した状態になり、アラートが表示されます。

テキストエリアでの例

　テキストエリアでの例です。

<form>
<textarea id="test-select2">ここを選択</textarea>
</form>

<script>
var x2 = document.getElementById("test-select2");
x2.addEventListener("select", function(){alert("テストです");}, false);
</script>

　実行例は、以下の通りです。

　テキストエリアでも動きは同じです。

サポート

・サポートするブラウザ

　以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　サポートするタグの一例は、以下の通りです。

　<input type="text">

　<input type="password">

　<textarea>

「イベントリスナー一覧」に戻る