这是一个简化的 contenteditable 编辑器,包含两行文本:
let button = document.querySelector("button");
button.addEventListener("click", modify);
function modify() {
let selection = window.getSelection();
selection.modify("move", "forward", 'line');
}
<div contenteditable>
<p>This is a line of text.</p>
<p>This is a second line of text.</p>
</div>
<button>Extend selection</button>
步骤:
- 将光标放在“This”之后的第一行
- 点击按钮
预期:光标移动到第一行的末尾。
实际:光标移动到第二行中间某处。我在 macOS 上使用 Chrome 128。
我不太清楚这种行为。规范 ( https://w3c.github.io/selection-api/#dom-selection-modify ) 也没有具体说明这种行为。
我的问题:
- 为什么在 Chrome 上给出的示例中光标会以这种方式移动?
- 还有其他方法可以让我把光标移动到 Chrome 上的行尾吗?