document.caretpositionfrompoint已废弃，chrome 51和firefox 48起彻底移除；应改用element.caretrangefrompoint()或input/textarea的selectionstart获取光标位置。
document.caretPositionFromPoint 在现代浏览器中已废弃且不可用
这个 API 早在 Chrome 51 和 Firefox 48 就被移除了，调用 document.caretPositionFromPoint() 会直接抛出 TypeError: document.caretPositionFromPoint is not a function。它不是“不兼容 IE”，而是连主流新版浏览器都彻底删了——别在新项目里找它，也别试图 polyfill。
替代方案：用 element.caretRangeFromPoint() 模拟光标定位
虽然全局方法没了，但 Element.caretRangeFromPoint(x, y) 仍被 Chrome、Edge、Safari（需开启实验特性）、Firefox（部分版本支持）保留。注意：它返回的是 Range，不是光标在文本中的字符索引，需要手动计算位置。
- 必须传入相对于该元素左上角的坐标（非 viewport 坐标），所以得先用
element.getBoundingClientRect()做偏移转换 - 只对可编辑元素（
contenteditable="true"）或<input>/<textarea></textarea>有效；对普通<p></p>调用会返回null - 返回的
Range的startOffset是节点内偏移，若目标节点是文本节点，它才接近“字符位置”；若落在<span></span>或换行符上，结果可能意外
const el = document.querySelector('[contenteditable]');
const rect = el.getBoundingClientRect();
const range = el.caretRangeFromPoint(
x - rect.left + window.scrollX,
y - rect.top + window.scrollY
);
if (range && range.startContainer.nodeType === Node.TEXT_NODE) {
const posInText = range.startOffset; // 粗略字符位置
}
真正可靠的文本坐标 → 光标位置转换：用 input/textarea 的 getSelectionRange
对于表单控件，<input type="text"> 和 <textarea></textarea> 提供原生支持：el.selectionStart 和 el.selectionEnd 是唯一稳定、跨浏览器、无需坐标计算的光标位置指标。但前提是用户已经点击/聚焦过——你无法仅凭鼠标坐标“预测”未聚焦时的光标位置。
- 如果目标是响应
click或mousedown事件并获取点击处的光标位置，必须先el.focus()，再立刻读el.selectionStart（部分浏览器需加setTimeout微任务延迟） - 对
contenteditable元素，可用window.getSelection().getRangeAt(0)配合range.startOffset，但要注意选区可能为空或跨节点 - 不要依赖
clientX/clientY反推字符索引——字体、换行、CSS width、letter-spacing 都会让像素到字符的映射非线性，纯靠计算极易出错
为什么没有通用“坐标→光标位置”API？
因为 HTML 渲染层和文本编辑模型是分离的：浏览器渲染引擎（Blink/Gecko）负责把 DOM 树画成像素，而光标定位属于编辑逻辑，依赖当前焦点状态、IME 输入模式、双向文本（RTL/LTR）上下文、甚至拼写检查高亮等动态因素。强行用坐标反查，本质是在绕过编辑系统做“图像识别式猜测”。这也是 caretPositionFromPoint 被废弃的根本原因——它不可靠、不可维护、语义模糊。
实际开发中，优先用 selectionStart、getSelection() 或监听 input/selectionchange 事件捕获真实编辑状态；坐标只是触发条件，不是计算依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
