Question

我希望所有文本和中断都在跨越，以下代码执行。在IE11和Chrome中完美运行但在FF中存在严重问题。也就是说，如果输入的第一个键是＆lt;输入＆gt;，光标无法移动到插入后的＆lt; br＆gt;。当输入的下一个键位于下一行时，插入位置似乎移动，但闪烁的光标不是。此外，如果退格以移除字符，则光标会返回到第一行。

最简单的演示方式：http://jsfiddle.net/jd2d7n3L/20/

输入第一个字符＆lt;输入＆gt;
预期结果（在chrome和IE10 +中发生的情况）是闪烁的光标向下移动一行。
输入＆＃39; a＆＃39;然后退格。预期结果是闪烁光标位于第2行最左侧

我在SO上已经阅读了许多与此相关的类似问题和答案，但没有具体处理这种情况。我怎样才能使FF表现出来？

HTML

<div id=bE contenteditable="true"><br></div>

JS

bE.addEventListener("keypress",KP);
bE.addEventListener("keypress",KU);

function getContainer()
  {
  var eC=window.getSelection().getRangeAt(0).endContainer;
  while(eC&&eC.nodeType==3)eC=eC.parentNode;
  return eC
  }

function insertElement(E)
  {
  var sel=window.getSelection(),range=sel.getRangeAt(0);
  range.deleteContents(); 
  range.collapse(true);
  range.insertNode(E);
  range.setStartAfter(E);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);     
  }

function KP(e)
  {
  var kc=e.which||e.keyCode;
  if(e.charCode||e.which===13)
    {
    var sel=window.getSelection(),range=sel.getRangeAt(0);
    var eC=getContainer();
    if(eC===bE)
      {
      eC=document.createElement("span");
      range.insertNode(eC);
      range.selectNodeContents(eC);
      sel.removeAllRanges();
      sel.addRange(range);
      }
    if(kc===13)insertElement(document.createElement("br"));
    else       insertElement(document.createTextNode(String.fromCharCode(kc)));

    e.preventDefault();
    }
  }

function KU(e) //ensures last element is br
  {
  if(!bE.lastChild||bE.lastChild.nodeName.toLowerCase()!=="br")bE.appendChild(document.createElement("br"))
  }

Answer 1

好的，我终于把它钉了下来。似乎Firefox不喜欢＆lt; br＆gt;作为任何父级的最后一个子节点。如果你将一个空的textnode附加到每个尾随＆lt; br＆gt;，它的作品！ Firefox＆lt;＆lt;＆gt;之后不会移动插入符号。 br＆gt;如果它是最后一个childNode。

<br/>插入contentedable span无法移动光标

1 个答案: