时间戳

首页 > 解决方案 > 在视口空间中获取文本光标（插入符号）位置？

javascript - 在视口空间中获取文本光标（插入符号）位置？

问题描述

是否可以获得插入符号的位置绝对屏幕空间位置？我的意图是隐藏插入符号并将其替换为可能在屏幕上“飞”的自定义组件。

标签： javascripthtmlreactjscaretdraftjs

解决方案

您可以使用 Selection API 获取插入符号位置，获取范围（collapsed==true仅显示插入符号时）及其客户端矩形。

document.addEventListener('selectionchange', () => {
  console.log(getSelection()?.getRangeAt(0)?.getClientRects()?.[0])
)

这些客户端矩形位于屏幕空间中，因此您可能还想跟踪文档滚动并再次获取矩形。

{x: 286.796875, y: 209, width: 0, height: 19, top: 209, …}

推荐阅读