異なるブラウザ間でテキストエリア内のキャレット位置 (文字単位) を取得するにはどうすればよいですか?

テキストエリア内のキャレット位置を文字数で取得する

問題の概要:

JavaScript開発者は、textarea 要素内の文字ベースのキャレット位置を取得するメソッドを探します。この位置は、さまざまなテキスト操作タスクにとって重要です。

回答:

Firefox および Safari ブラウザーは、textarea.selectionStart プロパティを通じて簡単なソリューションを提供します。ただし、Internet Explorer との互換性を確保するには、より複雑なアプローチが必要です。

提供されたコードは、ブラウザの種類に応じて異なる戦略を採用する getCaret() 関数を定義します。

• Gecko ベースのブラウザ (Firefox や Safari を含む): textarea.selectionStart に依存します。
• Internet Explorer の場合:一時的な範囲を作成し、元の範囲に対してその長さを測定することで機能をエミュレートします。

さらに、より高度なテキスト選択操作には、jQuery FieldSelection プラグインをお勧めします。

更新された実装:

元のコードは次のように改良されました。

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();
    var r = document.selection.createRange();
    if (r == null) { return 0; }
    var re = el.createTextRange(), rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);
    return rc.text.length;
  }
  return 0;
}

この更新された実装により、さまざまなブラウザ環境にわたって信頼性と柔軟性が向上します。

以上が異なるブラウザ間でテキストエリア内のキャレット位置 (文字単位) を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。