如何获取文本区域中基于字符的插入符位置？

在 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中文网其他相关文章！