【javascript】テキストエリア以外の文字列を選択状態にする

公開日：2014/06/23

更新日：2014/06/04

カテゴリー: javascript

javascriptでフォームのテキストやテキストエリアの文字列選択は簡単にできますが、それ以外の要素部分にある文字列は簡単に選択状態にできません。

ここではテキストエリア以外の文字列を選択状態にする方法を紹介します。

テキストエリア以外の文字列を選択状態にする

テキストエリア以外の文字列は、以下のスクリプトで選択可能です。

//要素の取得
var element = document.getElementById("ここにターゲットにする要素");
//rangeオブジェクトの作成
var range = document.createRange();
//取得した要素の内側を範囲とする
range.selectNodeContents(element);
//範囲を選択状態にする
window.getSelection().addRange(range);

まず、「document.getElementById("text")」で要素を指定します。

次に、「document.createRange()」でrangeオブジェクトを作成し、「selectNodeContents(element)」で指定した要素の内側を範囲に設定します。

そして「getSelection().addRange(range)」で設定された範囲を選択状態にします。

サンプルプログラム

以上を踏まえてテキストエリア以外の文字列を選択する場合、このようにすればよいです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>デモ　【javascript】テキストエリア以外の文字列を選択状態にする</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
	function text_select() {
		//要素の取得
		var element = document.getElementById("text");
		//rangeオブジェクトの作成
		var range = document.createRange();
		//取得した要素の内側を範囲とする
		range.selectNodeContents(element);
		//範囲を選択状態にする
		window.getSelection().addRange(range);
	}
      //-->
    </script>
  </head>
  <body>
     <p><input type="button" value="文字列の選択" onClick="text_select()"></p>
     <div id="text">サンプルテキストです。ここの文字列を選択する！</div>
  </body>
</html>

サンプルデモはこちら。

あわせて読んでほしい！

Follow @ysklog_net 　