我有一个 contentEditable div 元素。在可编辑区域的第一个按键上,我使用以下逻辑创建了一个容器 <p> 标记:
var c = (32 == key ? '\u00A0' : String.fromCharCode(key));
var e = document.createElement('p');
var sel, rng;
e.appendChild(document.createTextNode(c));
this.editDocument.appendChild(e);
sel = window.getSelection();
rng = document.createRange();
rng.selectNodeContents(e);
rng.collapse(false);
sel.removeAllRanges();
sel.addRange(rng);
我遇到的问题是在下一个按键事件上,Firefox 创建另一个文本节点作为新字符以及任何后续字符的容器。这意味着我的 p 标签有 2 个文本节点作为兄弟节点。Google Chrome 和 Opera 不这样做。这个额外的文本节点会导致我的撤消/重做系统出现问题。此撤消系统将插入符号位置保存为节点偏移数组。contentEditable div 的内容使用innerHTML 保存和恢复。但是,当通过此方法恢复内容时,只会创建一个文本节点,而 Firefox 之前有 2 个,从而导致错误。我想知道这种行为(创建额外的文本节点)是否在 Firefox 中是故意的,或者它是否可能是一个错误。任何建议或意见都非常感谢。