jQuery vs JavaScript：テキストエリア内のカーソル位置を設定する方法

2024-04-02

jQueryを使ってテキストエリア内のカーソル位置を設定する方法

この解説では、jQueryを使用してテキストエリア内のカーソル位置を設定する方法について説明します。

必要ライブラリ
カーソル位置を取得する方法

この解説では以下のライブラリが必要です。

jQuery

テキストエリア内のカーソル位置を取得するには、以下の2つの方法があります。

selectionStart プロパティは、テキストエリア内の選択範囲の開始位置を表すプロパティです。以下のコードのように、selectionStart プロパティを使用してカーソル位置を取得できます。

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を取得
const cursorPosition = textarea.selectionStart;

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を取得
const cursorPosition = textarea.selectionStart;

// カーソル位置を設定
textarea.setSelectionRange(cursorPosition, cursorPosition);

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を設定
textarea.setSelectionStart(cursorPosition);

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を設定
textarea.setSelectionRange(cursorPosition, cursorPosition);

<html>
<head>
<title>jQuery Set Cursor Position in Text Area</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>

<script>
$(document).ready(function() {
  // カーソル位置を取得
  const cursorPosition = $('#textarea').selectionStart;

  // カーソル位置を設定
  $('#textarea').setSelectionRange(cursorPosition, cursorPosition);
});
</script>
</body>
</html>

まとめ

この解説を参考に、実際にコードを書いて試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Set Cursor Position in Text Area</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>jQuery Set Cursor Position in Text Area</h1>
  <p>
    このサンプルコードは、jQueryを使用してテキストエリア内のカーソル位置を設定する方法を示します。
  </p>
  <textarea id="textarea"></textarea>
  <button id="button">カーソル位置を設定</button>
  <script>
  $(document).ready(function() {
    // ボタンクリック時にカーソル位置を設定
    $('#button').click(function() {
      // カーソル位置を取得
      const cursorPosition = $('#textarea').selectionStart;

      // カーソル位置を設定
      $('#textarea').setSelectionRange(cursorPosition, cursorPosition);
    });
  });
  </script>
</body>
</html>

このコードを実行すると、ブラウザにテキストエリアとボタンが表示されます。ボタンをクリックすると、テキストエリア内のカーソル位置が現在の選択範囲の開始位置に設定されます。

コード解説

<!DOCTYPE html>: HTML文書であることを宣言します。
<html lang="ja">: HTML文書の言語を日本語に設定します。
<head>: HTML文書のヘッダー部分です。
<meta charset="UTF-8">: 文字コードをUTF-8に設定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 画面幅に合わせて表示を調整します。
<title>jQuery Set Cursor Position in Text Area</title>: HTML文書のタイトルを設定します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: jQueryライブラリを読み込みます。
<p>: 段落を表示します。
<textarea id="textarea"></textarea>: テキストエリアを表示します。
<button id="button">カーソル位置を設定</button>: ボタンを表示します。

JavaScript

$(document).ready(function() {: DOMContentLoadedイベントが発生時に実行される処理を記述します。
// ボタンクリック時にカーソル位置を設定: ボタンクリック時に実行される処理を記述します。
const cursorPosition = $('#textarea').selectionStart;: テキストエリア内のカーソル位置を取得します。
$('#textarea').setSelectionRange(cursorPosition, cursorPosition);: テキストエリア内のカーソル位置を設定します。

実行方法

上記のコードをHTMLファイルとして保存します。
ブラウザでHTMLファイルを開きます。
テキストエリア内に文字を入力します。
ボタンをクリックします。

動作確認

ボタンをクリックすると、テキストエリア内のカーソル位置が現在の選択範囲の開始位置に設定されます。

応用

このサンプルコードを参考に、以下の応用が可能です。

テキストエリア内の特定の位置にカーソルを移動する

テキストエリア内のカーソル位置を設定する他の方法

JavaScriptのネイティブメソッドを使用する

以下のコードは、JavaScriptのネイティブメソッドを使用してテキストエリア内のカーソル位置を設定する例です。

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を取得
const cursorPosition = textarea.selectionStart;

// カーソル位置を設定
textarea.setSelectionRange(cursorPosition, cursorPosition);

caret.js ライブラリは、テキストエリア内のカーソル位置を操作するためのライブラリです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/caret/0.2.0/jquery.caret.min.js"></script>

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を取得
const cursorPosition = caret.get(textarea);

// カーソル位置を設定
caret.set(textarea, cursorPosition);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js"></script>

// テキストエリア要素を取得
const textarea = document.getElementById('textarea');

// カーソル位置を取得
const selection = rangy.getSelection();
const cursorPosition = selection.getRangeAt(0).startOffset;

// カーソル位置を設定
const range = rangy.createRange();
range.setStart(textarea, cursorPosition);
range.setEnd(textarea, cursorPosition);
selection.setSingleRange(range);

それぞれ的方法にはメリットとデメリットがあります。