[JavaScript] テキストの指定した範囲を選択状態にする

投稿日：2017年5月16日更新日：2018年4月28日

テキストの指定した範囲を選択状態にするには、setSelectionRangeを使用します。

サンプルソース

例）開始位置と終了位置を指定して範囲選択する

<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<meta charset="utf-8">
<script>
function setCursor(){
  var obj = document.getElementById("txtStr");
  var val1 = document.getElementById("txtFrom").value; //開始位置
  var val2 = document.getElementById("txtTo").value;   //終了位置

  obj.focus();
  obj.setSelectionRange(val1, val2);  //指定位置で選択状態にする
}
</script>
</head>
<body>
  <input type="text" id="txtStr" value="1234567890">
  <input type="text" id="txtFrom">
  <input type="text" id="txtTo">
  <input type="button" value="ボタン" onclick="setCursor();">
</body>
</html>

<!DOCTYPE html>

<head>

function setCursor(){

var obj = document.getElementById("txtStr");

var val1 = document.getElementById("txtFrom").value; //開始位置

var val2 = document.getElementById("txtTo").value; //終了位置

obj.focus();

obj.setSelectionRange(val1, val2); //指定位置で選択状態にする

}

</script>

</head>

<body>

</body>

</html>

サンプル

開始位置、終了位置を指定してボタンをクリックしてください。

開始位置：
終了位置：

↓指定した範囲が選択されます。

解説

数値でない値を指定した場合は、テキストの最初に位置付きます。
FromとToを逆転して指定した場合は、Toの位置に位置付きます。

執筆者：とら