Question

在Firefox中只会出现此问题。如果对keyup事件中的范围进行任何类型的更新，则不允许使用左箭头键将插入符号从行的开头移动到上一行的末尾。

请参阅：jsfiddle

<div id="bE" contenteditable="true">blah blah blah... enough to fill more than one line<br></div>

bE.addEventListener("keyup",KU);
function KU()
  {
  var sel=window.getSelection();
  var range=sel.getRangeAt(0).cloneRange();
  sel.removeAllRanges();
  sel.addRange(range);
  }

我在这里所做的就是获得范围并再次收回而不做任何更改。检索并保存范围（不更改任何内容）会导致此问题。真的需要让它工作。在其他浏览器中工作正常。

Answer 1

问题在于，在Firefox中，用户看到的插入位置与其在文档中的表示之间存在不匹配，即一行末尾的位置和下一行的开头，而明显不同的地图到文档中的同一点。在Chrome和其他WebKit式浏览器中，这个问题不存在，因为行尾的空格后面的可见位置不存在;空间不会被渲染，插入符号从行的开头直接到前一个单词的结尾。从概念上来说，这似乎比我对Firefox的方法更好，因为你不会指望换行的位置会影响在单词之间导航所需的箭头键按下次数。

对于解决方案，我建议您在调用removeAllRanges()和addRange()之前添加一项检查，确定您选择的范围是否与当前选定的范围相同。

如何修复firefox contenteditable wordwrap？

1 个答案: