テキスト入力フィールドのキャレット位置を取得するにはどうすればよいですか?

テキスト入力フィールド内のキャレット位置を取得する方法

テキスト入力フィールド内のカーソル位置を取得することは、さまざまなタスクに不可欠です。フォーム検証やテキスト編集など。 jQuery フレームワークは、この問題に対する簡単な解決策を提供します。

jQuery メソッド:

caretPosition() プラグインは、キャレットの位置を取得する便利な方法です。目的の入力フィールドで次の関数を呼び出すだけです。

$("input#myInput").caretPosition();

このメソッドは、入力フィールド内の文字インデックスを表す整数値としてキャレット位置を返します。

ネイティブブラウザ メソッド:

または、ネイティブ ブラウザ メソッドを使用してキャレット位置を取得できます。これらの方法はブラウザによって異なりますが、最も一般的なものは次のとおりです。

• Internet Explorer: 入力フィールドのselectionStart プロパティを使用します。
• Firefox: 入力のselectionStartプロパティとselectionEndプロパティを使用します。

例:

次の例は、ネイティブ JavaScript を使用してキャレットの位置を取得する方法を示しています:

function getCaretPosition(inputField) {
  // Initialize caret position to 0
  var caretPos = 0;

  // IE support
  if (document.selection) {
    inputField.focus();
    
    // Get empty selection range to find cursor position
    var selectionRange = document.selection.createRange();
    selectionRange.moveStart('character', -inputField.value.length);
    
    // Caret position is the length of the selection
    caretPos = selectionRange.text.length;
  }

  // Firefox support
  else if (inputField.selectionStart || inputField.selectionStart == '0') {
    // Caret position is the selection start or end, depending on the direction
    caretPos = inputField.selectionDirection == 'backward' ? inputField.selectionStart : inputField.selectionEnd;
  }

  return caretPos;
}

以上がテキスト入力フィールドのキャレット位置を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。