Fatal编程技术网
  • javascript/
  • Javascript 防止删除所有<；李>；可编辑内容中的标记<；ul>；

Javascript 防止删除所有<；李>；可编辑内容中的标记<；ul>；

javascript html

Javascript 防止删除所有<；李>；可编辑内容中的标记<；ul>；,javascript,html,contenteditable,Javascript,Html,Contenteditable,当您在内容可编辑的标记中一直退格到标记的开头时，将删除所有剩余的标记 <ul contenteditable="true"> <li>Hello</li> <li>World</li> </ul> 你好 世界 jsfiddle： 将光标放在世界中的“d”之后，并一直退格到行首。当您再次单击backspace时，它还会删除“Hello”列表项。如何防止这种行为 更新：看起来这种行为只存在于Chrome中

当您在内容可编辑的
标记中一直退格到
    • 标记的开头时，将删除所有剩余的
    • 标记

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

      

    • 你好
      • 

    • 世界
      •
    jsfiddle：

    将光标放在世界中的“d”之后，并一直退格到行首。当您再次单击backspace时，它还会删除“Hello”列表项。如何防止这种行为

    更新：看起来这种行为只存在于Chrome中，您需要在每个
    li
    标签上使用
    contenteditable

    如果您不想自己分配属性，那么可以使用Javascript来解决这个问题（您在问题中已经标记了Javascript，所以我假设您对Javascript解决方案持开放态度）

    var elm=document.queryselectoral（'ulli'）；
对于（变量i=0；i
    （使用Javascript分配属性）

    请注意，am在中使用的选择器过于通用，将匹配文档中的所有
    ul
    元素，因此如果要使特定的
    li
    元素组可编辑，请将
    class
    或
    id
    分配给
    ul
    元素，并适当定义唯一的选择器

    如果希望多个
    ul
    li
    可编辑，最好定义
    类而不是
    id
    ，因为
    id
    必须是唯一的。。。因此，每当您希望一组
    li
    可编辑时，定义unique会很麻烦。
    我发现：
    
Opera和Chrome中contenteditable列表的有害行为只有在父
    ul
    元素后面没有任何其他最小呈现空间为1px 1px的元素时才会发生。元素的
    显示
    值无关紧要，只要它是非空的或具有CSS设置的高度维度
    
因此，添加一个简单的
    将回答您最直接的问题
    
但是，您无法在询问时可靠地使用HTML中的
    contenteditable
    列表。
    
这个问题引起了我的兴趣，我在Moz FF 29-30、Opera 21、Google Chrome 35和IE 11以及Win 8.1上对它进行了测试。我测试了Enter、Backspace和Delete等简单键
    
TL；DR：IE 11完全搞砸了，如果
    ul
    后面跟着一个具有渲染大小的元素，并且Moz FF插入了一个奇怪的


    标记，Opera&Chrome会做得很好。您需要
    e.preventDefault（）
    ，
    e.keyCode/charCode
    和
    选项
    &
    范围
    jsapi来创建一个自定义的可编辑内容列表，该列表在所有浏览器中都能一致工作。然而，这些先决条件并不是在所有浏览器上都能始终如一地工作。最佳解决方案：使用现有编辑器或一些不可见的文本输入进行输入
    
以下是详细的解决方案：
    

    
按Enter键添加新的
    li
    将添加以下标记：
    

      

    • Opera和Google Chrome:

      • 

    • Moz FF:


      • 

    • IE 11：如果活动的
      li
      非空：

      • ，如果它是空的，IE会完全弄乱并插入一个
      p
      ，然后在它后面复制一个空的
        ，里面只有一个

        标记。此空
        ul
        将添加到原始元素（如果有）后面的元素之后

      

      
点击Backspace以删除
      li:not（：first child）
      将执行以下操作：
      

        

      • Opera和Google Chrome：如果
        ul
        后面没有呈现大小的元素，所有
        li
        都将被删除。如果是，则会发生预期的行为。（删除一个
        li
        ）
        • 

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

      • IE 11：与按Enter键时的行为相同
        • 

      

      
应不惜一切代价防止使用Backspace删除第一个
      li
      
对于每个经过测试的浏览器，这都会打破列表布局。所有新的回车点击将生成
      div
      ，作为列表的直接子项
      

      
点击Delete以删除后续的
      li
      在所有测试的浏览器中都能保持一致。随后的
      li
      将被删除，其中的任何内容将被传输到当前
      li
      

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

        

      • Opera、IE11和谷歌浏览器：这封信是打印出来的。自动插入的

        标记将被删除

      • 莫兹·弗夫：这封信是打印出来的。自定义

        标记未被删除
        • 

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

        

      • Opera、IE11和Google Chrome：自动插入另一个

        标记

      • 莫兹：没什么。自定义的

        仍然存在
        • 

      

      

      Fiddle：（第一个ul是自定义编码行为，不是完美的，第二个ul是标准的）
      这确实阻止了我看到的删除行为，但它也阻止了只删除一个li，或按enter键添加另一个li。我要寻找的是你在所见即所得编辑器中会发现的行为。@tilleryj所见即所得编辑器确实会删除
      li
      ，如果你按backspace按钮：）如果你想附加li，而不是使用按钮处理程序在点击该按钮时附加li，我知道它们会附加li，但它们不会删除所有li

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