如何获取输入框内光标到左侧的距离？

要计算输入框内光标到左侧的距离，仅靠selectionStart只能得到光标在文本中的索引，需要结合辅助元素模拟文本渲染的方式来获取实际宽度，具体实现步骤如下：

核心思路 #

创建一个与目标输入框样式完全一致的隐藏元素，将光标前的文本放入其中，通过计算该元素的宽度，再结合输入框的边框、内边距，得到光标到输入框最左侧的实际距离。

具体实现代码 #

function getCursorLeftOffset(inputEl) {
  // 创建用于模拟文本的辅助元素
  const helper = document.createElement('span');
  const inputStyle = window.getComputedStyle(inputEl);

  // 复制输入框关键样式，确保文本渲染效果一致
  helper.style.position = 'absolute';
  helper.style.visibility = 'hidden';
  helper.style.whiteSpace = 'pre'; // 保留空格，匹配输入框行为
  helper.style.font = inputStyle.font;
  helper.style.padding = inputStyle.padding;
  helper.style.border = inputStyle.border;
  helper.style.width = 'auto';
  helper.style.height = inputStyle.height;

  // 提取光标前的文本内容
  const prefixText = inputEl.value.slice(0, inputEl.selectionStart);
  helper.textContent = prefixText;

  // 插入到文档中才能计算宽度
  document.body.appendChild(helper);
  
  // 计算各部分距离：边框宽度 + 内边距 + 前置文本宽度
  const borderLeft = parseFloat(inputStyle.borderLeftWidth);
  const paddingLeft = parseFloat(inputStyle.paddingLeft);
  const textWidth = helper.offsetWidth;
  const totalOffset = borderLeft + paddingLeft + textWidth;

  // 清理辅助元素
  document.body.removeChild(helper);

  return totalOffset;
}

// 使用示例
const targetInput = document.getElementById('target-input');
targetInput.addEventListener('input', () => {
  console.log('光标到左侧距离：', getCursorLeftOffset(targetInput) + 'px');
});

关键注意事项 #

• 必须复制输入框的所有文本相关样式（字体、字号、行高、内边距等），否则模拟的文本宽度会与输入框实际渲染存在误差
• whiteSpace: 'pre'用于保留输入框中的空格，避免普通元素自动折叠空格导致宽度计算错误
• 该方法同样适用于textarea，只需确保辅助元素样式匹配textarea的渲染规则

内容的提问来源于stack exchange，提问作者Shavez Hameed