为什么Range.getBoundingClientRect（）为textarea中的范围返回0？

Question

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

• 通过document.createRange()
创建新范围
• 通过<textarea>
获取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。为什么这些字段为零？

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

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中   标记。