[JavaScript] テキストの選択範囲のカーソル位置を取得する

投稿日：2017年9月3日更新日：2018年8月22日

JavaScriptでテキストボックスのカーソル位置を取得するには、
selectionStart、selectionEndを使用します。

サンプルソース

例）選択範囲のカーソル開始位置と終了位置を表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function getRangeIndex(){
  var obj = document.getElementById("txt1");
  var s = obj.selectionStart;
  var e = obj.selectionEnd;

  var v = document.getElementById("view");
  v.innerText = "選択範囲のカーソル位置は、" + s + '～' + e + "です。";
}
</script>
</head>
<body>
  <input type="text" id="txt1" onkeyup="getRangeIndex();">
  <p id="view"></p>
</body>
</html>

<!DOCTYPE html>

<head>

function getRangeIndex(){

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

var s = obj.selectionStart;

var e = obj.selectionEnd;

var v = document.getElementById("view");

v.innerText = "選択範囲のカーソル位置は、" + s + '～' + e + "です。";

}

</script>

</head>

<body>

</body>

</html>

サンプル

↓動作確認ができます。

選択範囲のカーソル位置は、0～0です。

解説

カーソル位置は全角/半角に係わらず文字単位で取得されます。

[JavaScript] テキストの選択範囲のカーソル位置を取得する

サンプルソース

例）選択範囲のカーソル開始位置と終了位置を表示する

サンプル

解説

関連項目