我一直在尝试只选择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
等的有限文档,但它们似乎都是针对获得选择而不是设置。
两个问题:
-
selectNodeContents(node)
移动范围以包含node
的全部内容,因此您的setStart()
和setEnd()
调用基本上被忽略。 -
setStart(node, offset)
将范围的开始边界移动到node
中的偏移offset
。在元素的情况下,这意味着将边界放在元素的offset
子节点之后。在文本节点的情况下(这可能是您想要的),范围边界放在offset
字符之后。setEnd()
也是一样。如果您的可编辑元素中只有一个文本节点,那么您可能就完成了。一旦你开始嵌套元素,如果你想设置相对于你的可编辑元素的文本内容的选择,你可能需要一个更微妙的方法。
参见https://stackoverflow.com/a/24117242/96100。