select/JavaScript

イベントリスナーのselectについて説明します。

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イベントを登録しています。

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

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

 又、テキスト入力欄をマウスで選択した後、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>

  • このエントリーをはてなブックマークに追加