为什么 Range.getBoundingClientRect() 为 textarea 内的范围返回 0？

Question

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

• 通过document.createRange() 创建新范围
• 通过textarea.childNodes[0]获取<textarea>的唯一子节点
• 通过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> 是replacement element

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