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

テキスト入力フィールド内のカーソル位置の決定

テキスト入力フィールド内のカーソル位置を取得すると、ユーザー エクスペリエンスが向上し、特定の操作が簡素化されます。機能性。これを実現する方法は次のとおりです。

jQuery ソリューション

簡単なアプローチとして、入力フィールド要素のselectionStart プロパティを利用できます。このプロパティは、フィールド内のキャレットの現在位置の文字インデックスを返します。

$("#myinput").on("input", function() {
  let caretPosition = $(this).prop("selectionStart");
});

カスタム JavaScript ソリューション

または、jQuery プラグインが必要ない場合は、カスタム JavaScript 関数を実装できます。この関数は、選択の方向に応じて、selectionStart プロパティまたはselectionEnd プロパティを利用します。

function doGetCaretPosition(oField) {
  let iCaretPos = 0;

  if (oField.selectionStart || oField.selectionStart == '0')
    iCaretPos = oField.selectionDirection == 'backward' ? oField.selectionStart : oField.selectionEnd;

  return iCaretPos;
}

この関数は、適切な入力フィールドを引数として呼び出してコードに簡単に統合できます。

実装

カーソル位置を取得したら、それを使用してさまざまな実行を行うことができます。次のようなタスク:

• 指定された位置にテキストを挿入
• 特定の領域を強調表示
• キャレットの位置に基づいてテキスト検証を実行

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