2

我有<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>

4

1 回答 1

2

<textarea>是替换元素

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

于 2017-10-01T20:29:00.893 回答