javascript - getBoundingClientRect 在 Safari 中为顶部、左侧、右侧、底部返回 0

Question

所以，我有一个由 Facebook 提供支持的 contenteditable div draft-js。我需要获得该 div 中插入符号的视觉位置，并且我实现了这个（适用于 Firefox 和 Chrome）：

const selection = window.getSelection && window.getSelection();
if (selection.rangeCount > 0) {
    const coordinates = selection.getRangeAt(0).getBoundingClientRect();
}

在 Chrome 和 Firefox 的情况下，我得到了正确的坐标。但是，在 Firefox 中，所有位置属性都为 0。任何解决方法/跨浏览器解决方案？

Answer 1

好像我已经使用下一个代码解决了这些问题：

let range = window.getSelection().getRangeAt(0);
range = range.cloneRange();
range.setStart(range.startContainer, 0);
range.getBoundingClientRect();

这是小提琴。

2020 年 2 月 13 日更新：

当输入为多行时，这里更新了第一行的固定插入符号位置的小提琴。