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

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

<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 (2759d)