如何使用JS查找文本字段输入过程中插入点的位置？

完全可以实现，针对 <input>、<textarea> 这类常规文本输入字段，浏览器已经提供了原生API可以直接查询插入点位置，不需要额外引入第三方工具。

实现逻辑 #

对于处于聚焦状态的文本输入元素，直接读取两个原生属性即可获取位置：

• selectionStart：选区的起始字符索引（从0开始计数）
• selectionEnd：选区的结束字符索引
  如果当前没有选中任何文本，两个属性的数值完全相等，这个值就是当前插入点的位置。

代码示例 #

// 封装获取插入点位置的方法
function getCaretPosition(inputElement) {
  // 仅支持input、textarea两类文本输入元素
  const tag = inputElement.tagName.toLowerCase();
  if (tag !== 'input' && tag !== 'textarea') return -1;
  // 无选中文本时selectionStart和selectionEnd值一致
  return inputElement.selectionStart;
}

// 调用示例：点击输入框时打印当前插入点位置
const input = document.querySelector('#test-input');
input.addEventListener('click', () => {
  console.log('当前插入点位置：', getCaretPosition(input));
});

注意事项 #

• 该方法仅对文本类型的<input>生效，包括text、password、search、tel、url等类型，按钮、复选框、文件选择等非文本类型输入框不支持该属性
• 读取位置前需要确保输入元素处于聚焦状态，否则可能读取到错误的数值，必要时可以先调用inputElement.focus()主动触发聚焦后再读取位置

内容的提问来源于stack exchange，提问作者Ashish Neupane