我正在使用range.getBoundingClientRect
获取插入符的位置,但是在按下end
键时会给出错误的值。
目前,我有一个内容可编辑的div和一个插入符div:
<div id="editor" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales tellus nulla, quis viverra ipsum accumsan nec. Vivamus felis velit, dictum nec purus sed, placerat placerat libero.
</div>
<div id="caret"></div>
我检测到何时选择更改以更新插入符号位置
document.addEventListener("selectionchange", function() {
const rect = document.getSelection().getRangeAt(0).getBoundingClientRect();
document.getElementById('caret').style.left = `${rect.left}px`;
document.getElementById('caret').style.top = `${rect.top}px`;
})
当我按结束键时,我的插入符号将移至下一行的开头,而不是当前行的末尾。这是因为getBoundingClientRect
给出了错误的值。
这是复制品:
https://jsfiddle.net/2dauymov/10/
我在使用Chrome 78。