select

selectの基本的な使い方

イベントリスナーのselectは、テキスト入力欄で文字が選択された時に処理を実行できます。

以下は、利用例です。

<input type="text" value="ここを選択" id="test-select">

<script>
const x = document.querySelector("#test-select");
x.addEventListener("select", function(){alert("テストです");});
</script>

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

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

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

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

テキストエリアでの使い方

テキストエリアでの使い方です。

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

<script>
const x = document.querySelector("#test-select");
x.addEventListener("select", function(){alert("テストです");});
</script>

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

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

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。