Question

我一直试图只选择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等有限的文档，但它们似乎都是针对获取选择不设置它。

Answer 1

两个问题：

selectNodeContents(node)移动范围以涵盖node的整个内容，因此您的setStart()和setEnd()来电基本上被忽略。
setStart(node, offset)将范围的起始边界移动到offset内的偏移node。在元素的情况下，这意味着在元素的offset子节点之后放置边界。对于文本节点（可能是您想要的），范围边界位于offset个字符之后。与setEnd()相同。如果您的可编辑元素中有单个文本节点，则可能已完成。一旦开始使用嵌套元素，如果要设置相对于可编辑元素文本内容的选择，则可能需要more subtle approach。

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

选择最后一个单词或Contenteditable的特定范围

1 个答案: