1

这是我的 HTML：

<ul contenteditable>
  <li>Hi there 1</li>
  <li>HI 2 2 2 2 2</li>
  <ul><li>hi 3</li></ul> <!-- I know it's invalid, it's what document.execCommand('indent') yields -->
  <li> hi 4 hi there people 4 here now </li>
</ul>

（下周你可以在http://www.webdevout.net/test?06&raw看到它）

我试图确定当前选择的文本（在 IE8 中）是在一个 LI 内还是跨越多个 LI。当我选择 LI 的一和二的全部，然后在控制台中输入以下document.selection.createRange().parentElement().innerHTML内容时，只返回第二个 LI (HI 2 2 2 2 2 2) 的内容。

为什么 TextRange.parentElement 返回范围中的最终元素而不是整个范围的父元素？

文档说“如果文本范围跨越多个元素中的文本，则此方法返回包含所有元素的最小元素。” 我的最终目标是确定是否选择了多个 LI；我认为“检查 parentElement().nodeName.toUppercase === "LI"" 是否会这样做，但如果 parentElement() 没有返回 parentElement，我就不能这样做。

4

1 回答 1

3

我以前见过这种东西，它是 IE 中的一个错误。我在Rangy库中使用的解决方法是使用三个元素的最内层共同祖先：

  • parentElement()TextRange的
  • 调用 collapse(true) 后的parentElement()TextRange 的
  • 调用 collapse(false) 后的parentElement()TextRange

这是 Rangy 的代码：

/*
 This is a workaround for a bug where IE returns the wrong container
 element from the TextRange's parentElement() method. For example,
 in the following (where pipes denote the selection boundaries):

 <ul id="ul"><li id="a">| a </li><li id="b"> b |</li></ul>

 var range = document.selection.createRange();
 alert(range.parentElement().id); // Should alert "ul" but alerts "b"

 This method returns the common ancestor node of the following:
 - the parentElement() of the textRange
 - the parentElement() of the textRange after calling collapse(true)
 - the parentElement() of the textRange after calling collapse(false)
 */
var getTextRangeContainerElement = function(textRange) {
    var parentEl = textRange.parentElement();

    var range = textRange.duplicate();
    range.collapse(true);
    var startEl = range.parentElement();

    range = textRange.duplicate();
    range.collapse(false);
    var endEl = range.parentElement();

    var startEndContainer = (startEl == endEl) ?
        startEl : dom.getCommonAncestor(startEl, endEl);

    return startEndContainer == parentEl ?
        startEndContainer : dom.getCommonAncestor(parentEl, startEndContainer);
};
于 2012-07-30T23:57:36.497 回答