DOMによるフォーム・コントロールの操作 (6/6)
作成:2010-04-02 21:20
更新:2010-05-11 18:49
更新:2010-05-11 18:49
■テキスト選択のイベント
テキストをマウスで選択したときのイベントというのもあります。これは、実はけっこうやかいな問題をはらんでいます。
テキストが選択されたり、選択状態が変わったりした時のイベントは、「onselect」という属性として用意されています。これは、入力フィールド関係やテキストエリアなどに用意されています。選択されたテキストに関する情報は、イベントが発生したときに生成される「event」というオブジェクトにまとめられています。これは発生したイベントに関する各種の情報をまとめたオブジェクトです。onselectで処理を呼び出す際、このeventを引数に渡してやることで、必要な情報を得ることができます。が、問題なのは、「ブラウザによって、eventに用意されるものが違う」ということなのです。これは、実際にやってみないとわからないでしょう。
下のリストに、簡単なサンプルを用意しました。テキストエリアにテキストを書き、マウスで選択すると、選択されたテキストがその上に表示されます。
ここでは、「if (document.selection != undefined)」というif文を用意し、この結果によって異なる処理をしています。なぜこうなるのか、ざっと両方の処理について説明しましょう。
１．IE系の処理
ifの条件がtrueだった場合の処理は、これはIEのための処理になります。IEには、document.selectionというプロパティが用意されており、これで選択されたテキストに関する機能が提供されます。
このselectionにある「createRange」というメソッドを呼び出すことで、選択されたテキスト範囲に関するrangeオブジェクトというものが生成されます。そして、ここからtextプロパティを取得することで、選択範囲のテキストが得られます。
２．IE以外の処理
IE以外のブラウザでは、document.selectionというものは存在しません。ではどうするのかというと、発生したeventオブジェクトに用意されている「target」でイベントが発生したエレメントを取得し、そこから「selectionStart」「selectionEnd」というプロパティを使って、選択範囲の開始位置と終了位置を調べるのです。そして、エレメントに記述されているテキストから、その範囲内のテキストを取り出します。これはテキストの「substring」というメソッドで行うことができます。
――このように、選択されたテキストは、IEとそれ以外で全くやり方が違います。JavaScriptを扱う上で、もっとも面倒なのが、この「ブラウザに因る互換性」の問題なのです。特に、IEとそれ以外では、用意されているメソッドやプロパティが違っていたり、同じ機能でも働きが微妙に異なっていたりすることがあります。従って、スクリプトの動作チェックを行う際には、必ずIEとそれ以外のブラウザの両方で確認をするように心がけましょう。
テキストが選択されたり、選択状態が変わったりした時のイベントは、「onselect」という属性として用意されています。これは、入力フィールド関係やテキストエリアなどに用意されています。選択されたテキストに関する情報は、イベントが発生したときに生成される「event」というオブジェクトにまとめられています。これは発生したイベントに関する各種の情報をまとめたオブジェクトです。onselectで処理を呼び出す際、このeventを引数に渡してやることで、必要な情報を得ることができます。が、問題なのは、「ブラウザによって、eventに用意されるものが違う」ということなのです。これは、実際にやってみないとわからないでしょう。
○利用例○
下のリストに、簡単なサンプルを用意しました。テキストエリアにテキストを書き、マウスで選択すると、選択されたテキストがその上に表示されます。
ここでは、「if (document.selection != undefined)」というif文を用意し、この結果によって異なる処理をしています。なぜこうなるのか、ざっと両方の処理について説明しましょう。
１．IE系の処理
ifの条件がtrueだった場合の処理は、これはIEのための処理になります。IEには、document.selectionというプロパティが用意されており、これで選択されたテキストに関する機能が提供されます。
このselectionにある「createRange」というメソッドを呼び出すことで、選択されたテキスト範囲に関するrangeオブジェクトというものが生成されます。そして、ここからtextプロパティを取得することで、選択範囲のテキストが得られます。
２．IE以外の処理
IE以外のブラウザでは、document.selectionというものは存在しません。ではどうするのかというと、発生したeventオブジェクトに用意されている「target」でイベントが発生したエレメントを取得し、そこから「selectionStart」「selectionEnd」というプロパティを使って、選択範囲の開始位置と終了位置を調べるのです。そして、エレメントに記述されているテキストから、その範囲内のテキストを取り出します。これはテキストの「substring」というメソッドで行うことができます。
――このように、選択されたテキストは、IEとそれ以外で全くやり方が違います。JavaScriptを扱う上で、もっとも面倒なのが、この「ブラウザに因る互換性」の問題なのです。特に、IEとそれ以外では、用意されているメソッドやプロパティが違っていたり、同じ機能でも働きが微妙に異なっていたりすることがあります。従って、スクリプトの動作チェックを行う際には、必ずIEとそれ以外のブラウザの両方で確認をするように心がけましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
function doSel(e){
var str;
if (document.selection != undefined){
var range = document.selection.createRange();
str = range.text;
} else {
var target = e.target;
var s1 = target.selectionStart;
var s2 = target.selectionEnd;
var allstr = target.value;
str = allstr.substring(s1,s2);
}
var div = document.getElementById("target");
div.innerHTML = "選択テキスト：" + str;
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="target"></div>
<textarea id="area"
onselect="doSel(event);"></textarea><br>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る