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

【问题标题】：Select last word or specific range of Contenteditable选择最后一个单词或 Contenteditable 的特定范围
【发布时间】：2014-07-29 15:24:20
【问题描述】：

我一直在尝试仅选择 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 等的有限文档，但它们似乎都旨在获取选择而不是设置它。

【问题讨论】：

标签： javascript selection contenteditable

【解决方案1】：

两个问题：

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

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

【讨论】：