选择最后一个单词或“可满足内容”的特定范围

Select last word or specific range of Contenteditable

本文关键字：可满足内容 范围 单词 最后一个 可满足 选择      更新时间：2023-09-26

我一直在尝试只选择ContentEditable元素的最后一个字符

我在http://jsfiddle.net/mh7HK/上使用了Mozilla的一个例子，它可以在input字段上工作，但不能在ContentEditable字段上工作，尽管选择所有都可以工作

var elem = document.getElementById("contentEdit");
var range = document.createRange();
range.selectNodeContents(elem);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

这并不:

var elem = document.getElementById("contentEdit");
var range = document.createRange();
range.setStart(elem, 5) // breaks range Object?
range.setEnd(elem, 8)   // breaks range Object?
range.selectNodeContents(elem);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

.setStart()和.setEnd()应该是这样的，对吗?

我看过jQuery carrot, jQuery selection, Rangy等的有限文档，但它们似乎都是针对获得选择而不是设置。

两个问题:

  1. selectNodeContents(node)移动范围以包含node的全部内容，因此您的setStart()和setEnd()调用基本上被忽略。

  2. setStart(node, offset)将范围的开始边界移动到node中的偏移offset。在元素的情况下，这意味着将边界放在元素的offset子节点之后。在文本节点的情况下(这可能是您想要的)，范围边界放在offset字符之后。setEnd()也是一样。如果您的可编辑元素中只有一个文本节点，那么您可能就完成了。一旦你开始嵌套元素，如果你想设置相对于你的可编辑元素的文本内容的选择，你可能需要一个更微妙的方法。

参见https://stackoverflow.com/a/24117242/96100。

相关文章：