Question

如果您在内容可编辑<li>标记内一直退回到<ul>标记的开头，则会删除所有剩余的<li>标记。

<ul contenteditable="true">
    <li>Hello</li>
    <li>World</li>
</ul>

jsfiddle：http://jsfiddle.net/8Q53V/

将光标放在世界中的'd'后面，然后退回到行首。再次点击退格键时，它也会删除“Hello”列表项。你怎么能防止这种行为？

更新：看来此行为仅存在于Chrome

中

Answer 1

这是我发现的：

只有在父{1}}元素后面没有任何其他元素且最小渲染空间为1px x 1px的情况下，才会出现Opera和Chrome中可疑列表的错误行为。元素的ul值无关紧要，只要它是非空的或具有CSS的设置高度维度。

因此，添加一个简单的display将回答您最直接的问题。

但是，在询问时，您无法在HTML中可靠地使用<div style="height: 1px;">列表。

这个问题引起了我的兴趣，我在 Moz FF 29-30，Opera 21，Google Chrome 35＆amp; IE 11，在Win 8.1 上。我测试了简单的键，如 Enter ， Backspace 和 Delete 。

TL; DR ：IE 11完全搞砸了，Opera＆amp;如果contenteditable后跟一个具有渲染大小的元素，并且Moz FF会插入一个奇怪的ul标记，则Chrome会做得很好。您需要 ，e.preventDefault()和e.keyCode/charCode＆amp; Selection JS API用于创建自定义的可信任列表，该列表在所有浏览器中均可使用。但是，这些先决条件在所有浏览器上都不能始终如一。最佳解决方案：使用现有的编辑器或一些不可见的文本输入进行输入。

这些是详细的问题：

点击输入添加新的Range将添加以下标记：

Opera和Google Chrome ：li
Moz FF ：<li> <li>
IE 11 ：如果有效<li> 非空：li，如果它为空，则IE完全混乱＆amp;插入<li> </li>，然后在其后面复制一个空的p，里面只有一个<ul contenteditable="">标记。此空 将在原始元素后面的元素之后添加（如果有）。

点击 Backspace 删除ul将执行以下操作：

Opera和Google Chrome ：如果li:not(:first-child)后面没有带有渲染大小的元素，则所有ul都将被删除。如果是，则发生预期的行为。（删除了一个li）。

Moz FF ：发生预期的行为（删除了一个li）。但是，删除li后，Moz FF会将光标移出可信区域。

IE 11 ：与点击 Enter 时的行为相同。

应该不惜一切代价阻止 Backspace 删除第一个li 。

对于每个测试的浏览器，这都会破坏列表布局。所有新的 Enter 匹配都会生成li作为列表的直接子项。

点击删除以删除后续div在所有经过测试的浏览器中保持一致。随后的li将被删除，其中的所有内容都将转移到当前li

在空li中键入第一个字母将执行以下操作：

Opera，IE11和Google Chrome ：打印出来信。自动插入的li标记已删除。

Moz FF ：打印出来信。自定义 代码不已删除。

删除空 中的唯一字母将执行以下操作：

Opera，IE11和Google Chrome ：会自动插入另一个li标记。

Moz FF ：没什么。自定义 仍然存在。

小提琴：http://jsfiddle.net/8Q53V/8/（第一个ul是自定义编码行为，不完美，第二个ul是标准的）

Answer 2

您需要在每个contenteditable代码

上使用li

Demo

如果您不想自己分配属性，可以使用Javascript setAttribute()来处理 - （您在问题中标记了Javascript，因此我假设您已打开到Javascript解决方案）

var elm = document.querySelectorAll('ul li');
for (var i=0; i < elm.length; i++) {
    elm[i].setAttribute("contenteditable", "true");
}

Demo （使用Javascript分配属性）

请注意这里，我在querySelectorAll()中使用的选择器过于笼统，会匹配文档中的所有ul元素，因此如果您想要创建一个特定的li组{} 1}}元素可编辑，而不是将class或id分配给ul元素，并适当地定义唯一的选择器。

如果您想要多个ul li可编辑，最好定义class而不是id，因为id必须是唯一的。 ..因此，每当您想要一组li可编辑时，定义唯一性将非常麻烦。

防止删除内容可编辑<ul> </ul> </li>中的所有<li>标记

2 个答案: