当插入符位于空子 div 内时，contenteditable div 中的 getBoundingClientRect 出现问题

Question

我有一个 contenteditable div，其中包含一个 selectchange 事件，该事件记录新范围的 getBoundingClientRect。一切正常，直到插入符号移动到空 div 内，如下所示：

 <div contenteditable="">
        bbackground: transparent !important;
        <div id="meyes" style="padding-left: 100; min-height:1em;width: 500px;background-color: bisque;text-align: center;"></div>
        text
    </div>

  document.addEventListener('selectionchange', (e) => {
        let sel = window.getSelection();
        if (sel.rangeCount > 0) {
            let range = sel.getRangeAt(0).cloneRange();
            const rect = range.getBoundingClientRect();
            console.log("rect", rect);
        }
});

在这种情况下，当插入符号位于 id 为“meyes”的空 div 内时，getBoundingClientRect 返回全零：{x: 0, y: 0, width: 0, height: 0}。有没有办法解决此问题或解决此问题，即使在空 div 中也能获取实际的 getBoundingClientRect？”

任何替代建议将不胜感激。

Answer 1

您收到此消息是因为您的选择为空。您是否期望它响应整个元素的大小，即使其中没有选择任何文本？

setTimeout(function() {
  var r = document.querySelector("div").getBoundingClientRect();
  console.log(JSON.stringify(r));
  var r2 = window.getSelection().getRangeAt(0).getBoundingClientRect();
  console.log(JSON.stringify(r2));

}, 3000);

div {
  width: 300px;
  min-height: 30px;
  background: orange;
}

<div contenteditable="true">
</div>