1

我有一个函数返回一个包含两个元素的数组（在 IE 中不起作用）

  • 用户在 div 中选择的内容的 html 代码（id=text）
  • 选择范围

如果用户在文本 div 内选择一个简单的字符串，则范围返回正确的值，但是当用户在 div 的子元素（例如 div#text->p）内选择一个字符串时，范围的值与子元素相关，但是我希望他们与父母有关（div#text）

这里有一个 JsFiddle http://jsfiddle.net/paglia_s/XKjr5/：如果您在茶馆中选择一串普通文本或普通文本+粗体文本，您将获得正确的选择，而如果您选择粗体字（“ am") 你会得到错误的，因为范围与子元素有关。

有一种方法可以使范围始终与 div#text 相关？

4

2 回答 2

3

你可以使用我的Rangy库和它的新TextRange 模块，它提供了 Range 和 selection 的方法来转换容器元素的可见文本中的字符偏移量。例如：

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。可见文本不一定与 jQuerytext()方法返回的相同，因此您需要使用 Rangy 的innerText()实现。例子：

http://jsfiddle.net/timdown/KGMnq/5/

或者，如果您不想使用 Rangy，您可以调整我之前在 Stack Overflow 上发布的函数。但是，这些依赖于 DOM Range 和 Selection API，因此不适用于 IE < 9。

于 2012-06-09T11:04:41.937 回答
0

如果您不想在这里使用图书馆，那么这是一种对我有用的方法。该函数返回相对于给定节点的 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;
}
于 2012-07-06T07:53:46.633 回答