javascript - 无法在 'getRangeAt' : 0 is not a valid index 上执行 'Selection'

Question

我在使用 Chrome 和 Safari(适用于 Mozilla 和 IE + Edge)时遇到了这个问题。 我想使用 range=sel.getRangeAt(0); 存储插入符位置和选择

但是，我在 Chrome 中收到以下错误: Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

除以下方法外，我该如何解决此问题:here .

这是我的 fiddle

我不能使用这个方法的原因是因为我显示了一个hidden div , 并将文本插入 <input type="text">字段，然后我将其插入 contenteditable div .选择此输入字段让我保存新的选择，并弄乱了插入。

以下是显示问题的一些图像:

第 1 部分:contenteditable分区字段 第二部分:显示的隐藏div，打字，改变carter位置 第 3 部分:插入时，Chrome 和 Safari 中的控制台错误

有什么建议吗？

Answer 1

好的，所以我在您的代码中发现了一个错误，它非常简单，但很难找到 :)

问题:

第 46/72 行:bE1.focus() 不起作用，因此对象 Selection.range 不存在。 我通过调用 console.log(document.activeElement) 来检查页面中哪个元素处于事件状态，并进行了简单的检查，这是错误的元素。

解决方案:

更改了 bE1.focus() --> div_new_1.focus()

工作示例: jsFiddle

我更改的功能:

function lrestoreRangePosition1() {
  closePopupLink1();
  div_new_1.focus();
  var sel = window.getSelection(),
    range = sel.getRangeAt(0);
  var x, C, sC = bE1,
    eC = bE1;

  C = rp.sC;
  x = C.length;
  while (x--) sC = sC.childNodes[C[x]];
  C = rp.eC;
  x = C.length;
  while (x--) eC = eC.childNodes[C[x]];

  range.setStart(sC, rp.sO);
  range.setEnd(eC, rp.eO);
  sel.removeAllRanges();
  sel.addRange(range)
}

function lrestoreRangePositionInsert1() {
  var newText1 = document.getElementById('url_title1').value;
  var newText2 = document.getElementById('url_content1').value;

  var pasteText = "<a href='" + newText2 + "'>" + newText1 + "</a>";
  closePopupLink1();

  div_new_1.focus();
  console.log(document.activeElement)
  var sel = window.getSelection(),
    range = sel.getRangeAt(0);
  var x, C, sC = bE1,
    eC = bE1;

  C = rp.sC;
  x = C.length;
  while (x--) sC = sC.childNodes[C[x]];
  C = rp.eC;
  x = C.length;
  while (x--) eC = eC.childNodes[C[x]];

  range.setStart(sC, rp.sO);
  range.setEnd(eC, rp.eO);
  sel.removeAllRanges();
  sel.addRange(range);

  pasteHtmlAtCaret(pasteText);
}

如果有帮助请告诉我:)