如何在输入框的JavaScript keyup事件中获取光标屏幕位置？

这确实是个挺常见的痛点——键盘事件不像鼠标点击那样直接提供光标坐标，但我们可以借助DOM的Range API来精准解决这个问题，比单纯通过selectionStart计算字符宽度要靠谱得多，毕竟不同字符（全角/半角、不同字体）的宽度差异会让手动计算很容易出错。

下面是具体的实现步骤和代码示例：

• 首先在keyup事件中拿到输入框的光标位置selectionStart
• 创建一个Range对象，把它精确定位到光标所在的位置
• 调用Range的getBoundingClientRect()方法，获取光标实际渲染位置的视口坐标
• 如果需要页面级坐标（比如弹窗基于整个页面定位），再加上窗口的滚动偏移量

示例代码：

const inputElement = document.getElementById('your-input');

inputElement.addEventListener('keyup', function(e) {
  const input = e.target;
  // 获取当前光标在输入框中的索引位置
  const cursorIndex = input.selectionStart;

  // 创建Range并定位到光标位置
  const range = document.createRange();
  const selection = window.getSelection();
  // 这里要注意：input元素作为可编辑元素，需要传入的是字符索引
  range.setStart(input, cursorIndex);
  range.setEnd(input, cursorIndex);
  // 先清空已有选区，再把这个Range加入选区
  selection.removeAllRanges();
  selection.addRange(range);

  // 获取光标位置的边界矩形，这是相对于视口的坐标
  const cursorRect = range.getBoundingClientRect();
  
  // 转换为页面级坐标（视口坐标 + 滚动条偏移）
  const cursorPageX = cursorRect.left + window.scrollX;
  const cursorPageY = cursorRect.top + window.scrollY;

  // 现在就可以用这两个坐标来定位你的弹窗了
  console.log('光标页面坐标：', cursorPageX, cursorPageY);
});

为什么这个方法更可靠？ #

getBoundingClientRect()会直接返回浏览器渲染后光标所在位置的实际坐标，完全不需要你手动处理字体大小、字符间距、输入框padding这些样式因素，不管输入框里是什么内容，都能精准获取光标位置。

而且这个API的兼容性非常好，所有现代浏览器（包括IE9及以上）都支持，不用担心兼容问题。

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