テキストを選択状態にする

 <html>
 <body>
 <span>abcdefg</span>
 <script type="text/javascript">
 var span = document.getElementsByTagName('span')[0]; 
 
 if (window.getSelection) {
   var range = document.createRange();
   range.setStart(span.firstChild,2);
   range.setEnd(span.firstChild,5);
   var sel = getSelection();
   sel.removeAllRanges();
   sel.addRange(range);
 } else {
   var range = document.selection.createRange();
   range.moveToElementText(span);
   range.collapse();
   range.moveStart("character", 2);
   range.moveEnd("character", 3);
   range.select();
 }
 </script>
 </body>
 </html>
  • IE8/Fx3.5で確認。
  • Fxで、range.setStart()/setEnd()の代りにrange.selectNodeContents()を使っても良い。その場合、SPANタグ内のテキスト全部が選択される。

IEでmoveToPoint()を使う場合

 var range = document.body.createTextRange();
 range.moveToPoint(window.event.x, window.event.y);
 range.expand("WORD");
 range.select();

目的の要素に、例えば<span onclick="selectMe()">abcdefg</span>のようにイベントにファンクションを登録し、上のコードを実行出来るようにする。すると、abcdefgが選択状態になる。

参考


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2009-10-03 (土) 13:19:11