我具有与两个元件返回一个数组(不会工作在IE)的函数的
- 什么样的用户一个div内选择HTML代码(ID =文本)
- 的选择范围
如果用户选择文本中的简单字符串div的范围内返回正确的值,但是当用户选择的div元素子内的字符串(DIV#文本 - >点为例)范围内的值与子元素,但我希望他们能够进行相关的父(DIV#文本)
这里有一个的jsfiddle http://jsfiddle.net/paglia_s/XKjr5/ :如果您选择在teatarea正常的文本或普通文本+加粗的文本字符串,而如果你选择的粗体字,你会得到正确的选择(”我“),你会得到,因为范围与子元素的错误之一。
有办法做到,这样的范围总是与DIV#文本?
你可以使用我的四肢修长图书馆以及新的TextRange模块 ,它提供了范围和选择的方法,将和从字符偏移一个容器元素的可见文本中。 例如:
var container = document.getElementById("text");
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
var rangeOffsets = range.toCharacterRange(container);
}
rangeOffsets
具有性能start
和end
相对于内可见文本container
。 可见文本不一定是一样什么jQuery的text()
方法返回,所以你需要使用瘦长的innerText()
的实现。 例:
http://jsfiddle.net/timdown/KGMnq/5/
另外,如果你不想用四肢修长,你能适应我的功能之前,堆栈溢出公布 。 但是,这些依靠DOM Range和Selection API,以便将无法在IE <9工作。
如果你不想使用图书馆这里是一个方式,也为我工作。 该函数返回光标相对于所述给定节点的偏移量的textContent(未相对于子节点)。 注意:当前光标位置必须位于所述给定节点或以任何其子节点。 这不是跨浏览器兼容(特别不是IE),但我认为这是没有太多的工作,以解决这个问题,以及:
function getCursorPositionInTextOf(element) {
var range = document.createRange(),
curRange = window.getSelection().getRangeAt(0);
range.setStart(element, 0);
range.setEnd(curRange.startContainer, curRange.startOffset);
//Measure the length of the text from the start of the given element to the start of the current range (position of the cursor)
return document.createElement("div").appendChild(range.cloneContents()).textContent.length;
}