contenteditable中无法访问的空列表项

Question

当我在CONTENTEDITABLE div元素的例子创建一个有序列表类似下面我无法在Firefox访问空列表项.在Chrome中,它在功能方面起作用,但仍有一个小的缩进问题.

问题

考虑下面的例子.(也可以作为JSFIDDLE使用)在这里你可以看到我使用JavaScript创建了有序列表.每一行都成为一个列表项.第二个列表项为空,因为该行为空.我也使用自定义列表样式.

CSS

#editable ol {
    list-style-type: none;
}
#editable ol > li {
    counter-increment: customlistcounter;
}
#editable ol > li::before {
    content: counter(customlistcounter) " ";
}
#editable ol:first-child {
    counter-reset: customlistcounter;
}

HTML

<div class="editable" id="editable" contenteditable="true">first

third</div>

JavaScript的

var editable = document.getElementById("editable");
editable.innerHTML = '<ol><li>'+editable.textContent.split("\n").join('</li><li>')+"</li></ol>";

行为

在Firefox 48.0中

如果我将光标设置到第一行的末尾并使用键盘将光标向右移动,则光标会立即跳转到第三行.同样,如果将光标定位到第三行的开头,然后按左方向键将光标跳到第一线.此外,我无法使用鼠标将光标设置为第二行.

在Chromium 52.0中

与Firefox相比,我可以使用鼠标和键盘将光标设置为第二行.但是,光标插入符号出现在项目标记的前面而不是它后面.当我输入一个字符时,光标会跳到右侧.即使我再次删除该字符,它也会保持在右侧.

预期的行为

当我复制并使用JavaScript生成的HTML代码时(例如使用Firebug),删除JavaScript部分和自定义列表样式我最终使用以下代码(也可用作JSFIDDLE):

<div class="editable" id="editable" contenteditable="true"><ol><li>first</li><li></li><li>third</li></ol></div>

这适用于Firefox和Chrome.您可以将光标设置为第二行,光标插入符号显示在右侧位置.CSS部分有其公平的问题.如果你不丢弃它,你可以通过鼠标和第一行的箭头键到达第二行,但不能从第三行到达.而你无法通过键盘从第二行到达第一行.

问题

为什么使用第一种方法不起作用？它不应该导致完全相同的行为？这是一个错误,未定义的行为还是我在这里遗漏了什么？另外,我该如何解决这个问题？我必须使用JavaScript在contenteditable div元素中创建内容.另外我想使用自定义列表样式.但我希望我的第二个例子中的行为,我可以编辑空的第二行.

更新

我第二次想到了这件事.由于纯HTML/CSS版本运行得更好,它可能是一个解析器问题.所以我在创建列表项时尝试了不同的方法.万一你好奇,以下也不起作用.这种行为与我的第一次尝试完全一样.

var editable = document.getElementById("editable");
var lines = editable.textContent.split("\n");

while(editable.firstChild) {
    editable.removeChild(editable.firstChild);
}
var ol = document.createElement("ol");

for(var i = 0; i < lines.length; i++)
{
    var li = document.createElement("li");
    var textnode = document.createTextNode(lines[i]);
    li.appendChild(textnode);
    ol.appendChild(li)
}
editable.appendChild(ol);

Answer 1

一种解决方案是在每个空行中添加一个不可见字符。就像是‌。

var editable = document.getElementById("editable");
editable.innerHTML = '<ol><li>'+editable.textContent.split("\n").join('</li><li>').split('<li></li>').join('<li>&zwnj;</li>')+"</li></ol>";

缺点是，在某些情况下，用户必须按箭头键两次，就像‌对待普通字符一样。如果还需要修复此问题，可以通过侦听按键事件并手动更正插入符的位置来完成此操作。