文本编辑器光标定位问题：点击字母中间时光标需移至字母后方

别再手动计算坐标了，浏览器原生的Range和Selection API直接就能搞定这个需求，比自己折腾定位靠谱多了，具体操作如下：

核心实现步骤 #

• 替换点击定位逻辑：
  给你的编辑器内容区域绑定点击事件，用浏览器提供的点位光标API获取精准的字符间隙位置，而非直接用鼠标坐标设置top/left：

  // 假设编辑器内容容器类为.editor-content，自定义光标为.caret
  document.querySelector('.editor-content').addEventListener('click', function(e) {
    let targetRange;
    // 兼容不同浏览器的API
    if (document.caretPositionFromPoint) {
      const pos = document.caretPositionFromPoint(e.clientX, e.clientY);
      targetRange = document.createRange();
      targetRange.setStart(pos.offsetNode, pos.offset);
      targetRange.setEnd(pos.offsetNode, pos.offset);
    } else if (document.caretRangeFromPoint) {
      targetRange = document.caretRangeFromPoint(e.clientX, e.clientY);
    }
  
    // 让浏览器选中该范围，同时获取位置信息
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(targetRange);
  
    // 用原生光标位置定位自定义红色光标
    const caretRect = targetRange.getBoundingClientRect();
    const customCaret = document.querySelector('.caret');
    customCaret.style.left = `${caretRect.right}px`; // 用right确保光标在字符后方
    customCaret.style.top = `${caretRect.top}px`;
    customCaret.style.height = `${caretRect.height}px`;
  });
  

• 隐藏原生光标：
  若想完全使用自定义红色光标，给编辑器加CSS隐藏原生光标：

  .editor-content {
    caret-color: transparent;
  }
  

• 输入同步处理：
  用户输入时，需将内容插入到targetRange对应的位置，比如监听keydown事件，用targetRange.insertNode(document.createTextNode(key))插入字符，之后更新Range位置以保证光标跟随输入移动。

方案优势 #

原生API已帮你处理好字符边界判断，不管点击字母中间还是边缘，都会自动定位到最近的字符后方间隙，完全符合需求，还能避免字体、字号变化带来的宽度计算适配问题。

内容的提问来源于stack exchange，提问作者Anshul chordia