javascript - 为什么 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 .为什么这些字段为零？

---

请注意，如果我替换 <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

Objects inserted using the CSS content property are anonymous replaced elements. They are "anonymous" because they don't exist in the HTML markup.