テキストエリア内の文字ベースのキャレット位置を取得するにはどうすればよいですか?

Textarea での文字ベースのキャレット位置の取得

textarea 要素でのキャレット位置の決定は、特に正確な位置を求める場合に困難になることがあります。文字単位の列インデックス。これを実現する方法の内訳は次のとおりです。

Firefox および Safari の場合

Firefox や Safari などの Gecko ベースのブラウザは、textareas でselectionStart プロパティをシームレスに提供します。このプロパティは、要素の先頭からのキャレットの位置を文字で表します。

Internet Explorer の場合

残念ながら、Internet Explorer ではキャレットに直接アクセスできません。位置。代わりに、より複雑なアプローチに頼る必要があります:

• 選択範囲の作成: createRange() を使用して選択範囲オブジェクトを生成します。
• 選択範囲の複製: 比較のために選択範囲の複製を作成します
• 選択範囲の移動: 要素テキストの先頭に改行文字を含めるように重複した選択を変更します。
• 選択範囲の長さの比較: 元の選択範囲の長さから複製選択範囲の長さを減算して、 caret.

完全なコード例

次の JavaScript コードは、文字内のキャレット位置を取得する方法を示しています。

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;
}

使用例

この関数は次のように利用できますso:

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);

周囲の文字列の取得

カーソルまたは選択範囲の周囲の文字列を取得するには、substring() 関数を利用してテキストを抽出します。選択中および選択後。

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