[JavaScript] テキストの指定位置にカーソルをセットする（.setSelectionRange）

投稿日：2017年9月12日更新日：2018年4月28日

テキストの指定位置にカーソルをセットするには、.setSelectionRange()を使用します。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプル</title>
<meta charset="utf-8">
<script>
function setCursor(){
  var obj = document.getElementById("txt1");
  var val = document.getElementById("txt2").value;

  obj.focus();
  obj.setSelectionRange(val, val);
}
</script>
</head>
<body>
  <input type="text" id="txt1" value="1234567890">
  <input type="text" id="txt2">
  <input type="button" value="ボタン" onclick="setCursor();">
</body>
</html>

<!DOCTYPE html>

<head>

function setCursor(){

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

var val = document.getElementById("txt2").value;

obj.focus();

obj.setSelectionRange(val, val);

}

</script>

</head>

<body>

</body>

</html>

サンプル

カーソル位置を数値で指定してボタンをクリックしてください：

↓指定位置にカーソルが位置付きます

解説

最大位置を超える値を指定した場合は、テキストの最後に位置付きます。
数値でない値を指定した場合は、テキストの先頭に位置付きます。

執筆者：とら