onselectイベント

onselectイベント(セレクトイベント)とは、INPUT要素やTEXTAREA要素のテキストを選択した時のイベント。

構文

HTML

<element onselect="イベントハンドラ">

INPUT要素
<input type="text" onselect="イベントハンドラ">
TEXTAREA要素
<textarea onselect="イベントハンドラ"></textarea>

JavaScript

object.onselect = function(){ イベントハンドラ };

サンプル1


選択した回数:0

サンプル1について

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプル1の動作について

テキスト入力欄のテキストを選択する度に、「選択した回数:」の右横の数値に1を加算する。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
var $sample1count = 0;
function sample1select() {
 document.getElementById( "sample1output" ).innerHTML = ++$sample1count;
}
</script>

HTML

<div>
 <input type="text" value="サンプル" onselect="sample1select();">
 <br />
 選択した回数:<span id="sample1output">0</span>
</div>

サンプル2


選択した回数:0

サンプル2について

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプル2の動作について

テキスト入力欄のテキストを選択する度に、「選択した回数:」の右横の数値に1を加算する。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample" ).onselect = function(){
  sample2select();
 };
}
var $sample2count = 0;
function sample2select() {
 document.getElementById( "sample2output" ).innerHTML = ++$sample2count;
}
</script>

HTML

<div>
 <input type="text" id="sample" value="サンプル">
 <br />
 選択した回数:<span id="sample2output">0</span>
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, フォームイベント, リファレンス パーマリンク