selectの使い方
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以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
サポートするタグの一例は、以下の通りです。
<input type="text">
<input type="password">
<textarea>