如何在无需鼠标点击的情况下获取输入光标X、Y坐标？

可以实现，核心是利用浏览器的Selection API结合元素焦点事件，无需鼠标点击就能拿到光标坐标。具体步骤和代码如下：

• 监听输入框的focus事件：Tab键切换到输入框时会自动触发这个事件，完全不需要鼠标操作
• 通过window.getSelection()获取当前选区，光标本质是一个空选区的起始位置
• 用getBoundingClientRect()获取光标位置的矩形信息，再结合窗口滚动偏移计算屏幕坐标

代码示例 #

// 给所有输入类元素绑定焦点事件
document.querySelectorAll('input, textarea, [contenteditable="true"]').forEach(input => {
  input.addEventListener('focus', () => {
    const selection = window.getSelection();
    if (selection.rangeCount === 0) {
      // 处理刚选中输入框时空选区的情况，手动创建起始位置的Range
      const range = document.createRange();
      range.selectNodeContents(input);
      range.collapse(true);
      selection.addRange(range);
    }
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    // 转换为绝对屏幕坐标（包含页面滚动距离）
    const cursorX = rect.left + window.scrollX;
    const cursorY = rect.top + window.scrollY;
    console.log('光标屏幕坐标：', [cursorX, cursorY]);
  });
});

补充说明 #

• 兼容普通文本输入框、textarea和contenteditable可编辑元素
• 刚通过Tab选中输入框时，光标默认停在内容起始位置，代码里处理了空选区的边界情况，确保能稳定获取坐标
• getBoundingClientRect()返回的是相对于浏览器视口的位置，加上window.scrollX/Y即可得到屏幕绝对坐标

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