javascript - 未捕获的索引大小错误 : Failed to execute 'getRangeAt' on 'Selection' : 0 is not a valid index

Question

这里有什么问题吗？

if ( window.getSelection() ) 
  EditField = window.getSelection().getRangeAt(0);

抛出错误:

Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

Answer 1

这个问题似乎是 WebKit 特有的；我无法在 IE 或 Firefox 中重现它。正如OP已经提到的，Google Chrome 上的错误是:

Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index

Safari 也有同样的问题，但消息不同:

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

通常发生在简单的所见即所得编辑器中。示例:

<form name="frm">
    <div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;">
    Text inside my editor.
    </div>
    Click this button to insert some text into the text editor:
    <button type="button" onclick="doInsert('TEST');">Insert</button>
</form>

<script>
    function doInsert(text) {
        var sel = window.getSelection && window.getSelection();
        if (sel) {
            var range = sel.getRangeAt(0);              // error here
            var node = document.createTextNode(text);
            range.deleteContents();
            range.insertNode(node);
        }
    }
</script>

页面加载后，单击按钮；您将在 JavaScript 控制台 (Chrome) 或错误控制台 (Safari) 中看到错误消息。但是，如果您在单击按钮之前单击编辑器部分中的任意位置，将不会发生错误。

这个问题很容易预防；在调用 getRangeAt 之前始终检查 rangeCount:

function doInsert(text) {
    var sel = window.getSelection && window.getSelection();
    if (sel && sel.rangeCount > 0) {
        var range = sel.getRangeAt(0);
        ...

当然，您可以通过在页面加载时给予编辑器焦点(使用 focus 方法)来避免这种情况。

但是，有极少数事件会导致您的编辑器稍后失去其选择范围。到目前为止，我只能使用多选列表控件来重现此内容:

<form name="frm">
  <div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;">
    Click to position the caret anywhere inside this editor section.
  </div>
  Next, select an item from this list:
  <select id="insertables" multiple="multiple">
    <option>foo</option>
    <option>bar</option>
    <option>baz</option>
  </select>
  <br />Finally, click this button to insert the list item into the text editor:
  <button type="button" onclick="doInsert(frm.insertables.value);">Insert</button>
</form>

<script>
  function doInsert(text) {
    var sel = window.getSelection && window.getSelection();
    if (sel) {
      var range = sel.getRangeAt(0); // error here
      var node = document.createTextNode(text);
      range.deleteContents();
      range.insertNode(node);
    }
  }
</script>

同样，我可以通过检查 rangeCount 来防止错误。但问题仍然是，我的按钮没有按照预期在最后一个已知的插入符号位置插入选定的列表项。方法focus没有帮助；它将重置插入符号位置到编辑器中的左上角位置。

一个解决方案是不断保存当前的选择范围(为此目的，捕获事件 SelectionChange):

var savedRange = null;

document.addEventListener("selectionchange", HandleSelectionChange, false);

function HandleSelectionChange() {
    var sel = window.getSelection && window.getSelection();
    if (sel && sel.rangeCount > 0) {
        savedRange = sel.getRangeAt(0);
    }
}

并在单击按钮时恢复它:

function doInsert(text) {
    var sel = window.getSelection && window.getSelection();
    if (sel && sel.rangeCount == 0 && savedRange != null) {
        sel.addRange(savedRange);
    }
    if (sel && sel.rangeCount > 0) {
        var range = sel.getRangeAt(0);
        var node = document.createTextNode(text);
        range.deleteContents();
        range.insertNode(node);
    }
}

fiddle :http://jsfiddle.net/stXDu/