onselect

イベントハンドラのonselectについて、サンプルコードを示しながら使い方を説明しています。

onselectの基本的な使い方

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

以下は、利用例です。

【onselect利用例】
<input type="text" value="ここを選択" id="test-select">

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

赤字部分は、1行目で指定したIDをxにオブジェクトで登録しています。また、2行目は無名関数で直接alertを記述していますが、func1などと関数を呼び出すこともできます。

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

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

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

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

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

【テキストエリアでの利用例】
<textarea id="test-select">ここを選択</textarea>

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

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

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

HTMLの属性として記述する(非推奨)

onselectは、HTMLの属性としても記述できます。

【onselectをHTML属性で記述する例】
<input type="text" value="ここを選択" onselect="alert('テストです');">

inputタグで、onselect属性によってalertを実行しています。これでも、同じ動作をします。

属性で記述する方法は、以前は多く使われていましたが、今では非推奨になっています。新しくスクリプトを作る時は、これまで説明したプロパティ(x.onselectなど)で記述するか、イベントリスナーを使って記述がお薦めです。

ブラウザのサポート状況

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

【パソコン】
項目 IE Ed Fx Ch Sa Op
onselect
【スマートフォン】
項目 Sa An Op Ch Fx Sm
onselect
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

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