为什么 Range.getBoundingClientRect() 对于文本区域内的范围返回 0？

Question

我有<textarea>元素并在其中创建范围：

• 通过创建新范围document.createRange()
• <textarea>获取via的唯一子节点textarea.childNodes[0]
• range.setStart通过和设置范围开始和范围结束range.setEnd

然后我打电话range.getBoundingClientRect()：

let textarea = document.querySelector('textarea');
let node = textarea.childNodes[0];

let range = document.createRange();
range.setStart(node, 3);
range.setEnd(node, 5);
console.log(range.getBoundingClientRect());

<textarea>aa bb cc</textarea>

但我收到ClientRect全零字段的对象，即left = top = width = height = 0. 为什么这些字段为零？

---

<textarea>请注意，如果我用普通的 div替换，一切正常：

let textarea = document.querySelector('div');
let node = textarea.childNodes[0];

let range = document.createRange();
range.setStart(node, 3);
range.setEnd(node, 5);
console.log(range.getBoundingClientRect());

<div>aa bb cc</div>

Answer 1

<textarea>是一个替换元素

使用 CSS content 属性插入的对象是匿名替换元素。它们是“匿名的”，因为它们不存在于 HTML 标记中。