如何获取空行输入光标位置?

背景

我正在为思源笔记开发一款光标美化插件,通过隐藏原生光标并使用自定义 <div> 元素模拟光标效果。核心逻辑是通过 window.getSelection() 获取光标位置,但在处理空行时遇到定位失效问题。

问题

当光标位于空段落时,getBoundingClientRect() 返回零尺寸矩形

当前

private getCursorRect(): DOMRect | null { const selection = window.getSelection(); if (!selection?.rangeCount) return null; try { return selection.getRangeAt(0).getBoundingClientRect(); } catch (error) { console.debug("获取光标位置失败", error); return null; } }

求教

请问各位有比较好的方法来获取空行时的光标位置吗?

DeepSeek 说有一个 caretPositionFromPoint 方法,这个能更好地实现我想要的效果吗?

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    23771 引用 • 96549 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8853 引用 • 40338 回帖 • 132 关注

相关帖子

被采纳的回答
  • 这是因为,空行,光标处的结点不是 text 是 dom 元素,空行可以用 window.getSelection().getRangeAt(0).startContainer 获取

    比如下面这个兼容二者的方式

    (window.getSelection().getRangeAt(0).startContainer.nodeType === Node.TEXT_NODE?window.getSelection().getRangeAt(0):window.getSelection().getRangeAt(0).startContainer).getBoundingClientRect();

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...