如何取得文字區域中基於字元的插入符位置？

在Textarea 中取得基於字元的插入符位置

確定textarea 元素中的插入符位置可能是一個挑戰，特別是在尋找確切的位置時以字元為單位的列索引。以下是如何實現此目的的詳細說明：

對於Firefox 和Safari

基於Gecko 的瀏覽器（如Firefox 和Safari）無縫地在文本區域上提供SelectionStart 屬性。此屬性表示插入符號從元素開頭開始的字元位置。

對於 Internet Explorer

不幸的是，Internet Explorer 不提供對插入符號的直接存取位置。相反，您需要採用更複雜的方法：

• 建立選取範圍：使用 createRange() 產生選取範圍物件。
• 重複選擇： 建立選取範圍的副本以進行比較
• 移動選取邊界：修改重複的選擇以在元素文字的開頭包含換行符。
• 比較選擇長度： 從原始選取範圍長度減去重複選取範圍的長度，以決定複製選取範圍的位置

完整程式碼範例

以下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中文網其他相關文章！