Question

请考虑以下代码：

<div contenteditable="true">One two th|ree <span>four</span> five six seven</div>

让我们假设插入符号（闪烁的光标）放在字母“h”和“r”之间的单词“three”上。获得单词开头和结尾位置的最佳（跨浏览器）方法是什么？

我的目标是确定插入符号是否更靠近单词的开头或结尾，然后将插入符号移到更接近的位置。因此，对于我提供的示例，它应该将插入符号移到此处：

<div contenteditable="true">One two |three <span>four</span> five six seven</div>

如果我可以使用跨浏览器（包括Opera和IE）解决方案，那将是最好的。

Answer 1

您可以使用我的Rangy库的TextRange module。

演示：http://jsfiddle.net/8yU2G/

代码：

var editableDiv = document.getElementById("yourDivId");
var sel = rangy.getSelection();
var selRange = sel.getRangeAt(0);
var originalCharRange = selRange.toCharacterRange(editableDiv);
selRange.expand("word");
var expandedCharRange = selRange.toCharacterRange(editableDiv);

// originalCharRange and expandedCharRange have properties "start" and "end"

如何在一个可信的div中找到从单词的开头和结尾偏移的插入符号？

1 个答案: