无法在'Selection'上执行'getRangeAt':0不是有效索引

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.

我怎么能用以下的方式解决这个问题:这里.

这是我的小提琴

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

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

第1部分:contenteditablediv字段 第2部分:显示的隐藏div和键入,更改卡特位置 第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);
}

如果有帮助,请告诉我:)