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

时间:2014-07-29 15:24:20

标签: javascript selection contenteditable

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

1 个答案:

答案 0 :(得分:0)

两个问题:

  1. selectNodeContents(node)移动范围以涵盖node的整个内容,因此您的setStart()setEnd()来电基本上被忽略。

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

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