Jquery 阻止contenteditable在enter上添加相同的类_Jquery_Html

Jquery 阻止contenteditable在enter上添加相同的类

jquery html

Jquery 阻止contenteditable在enter上添加相同的类,jquery,html,Jquery,Html,我已经将contenteditable=“true”设置为ul，我在这里面有一个列表正如您在每个列表前面看到的，我设置了复选框。如果我单击复选框，它将切换类已选中。问题是，当我单击复选框并按enter键时，它会将相同的类checked添加到此添加的列表中我不想检查添加的列表。有没有办法防止这种情况发生提前谢谢你 $（文档）.ready（函数（）{ $（文档）。在（'click'，'ul li'，function（）上{ $（this.toggleClass（'checked'）； }) $（

我已经将

contenteditable=“true”

设置为

ul

，我在这里面有一个列表
正如您在每个列表前面看到的，我设置了

复选框

。如果我单击复选框，它将切换类

已选中

。问题是，当我单击复选框并按enter键时，它会将相同的类

checked

添加到此添加的列表中
我不想检查添加的列表。有没有办法防止这种情况发生

提前谢谢你

$（文档）.ready（函数（）{
$（文档）。在（'click'，'ul li'，function（）上{
$（this.toggleClass（'checked'）；
})
$（文档）。在（'click'，'ul li span'，函数（e）上{
e、 停止传播（）；
})
});
李：以前{
背景图片：url（数据：数据：图像/png；Bas64，IvBoBorWeWeWeWeWe数据：数据：数据：图像/png；Bas64，基础64，IvBoBorWeWeWe数据：数据数据：图像/数据：图像/png；基础64，基础64，IvBoBorWeWeWeWeWeWeWeWeWeWeWeWeWeWe数据：数据：数据：数据：图像/数据：图像/巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴新，一一一个研究，一个巴巴巴巴巴巴巴巴巴新的数据，一一个研究，一个研究，一个研究，一个研究，一个巴巴巴巴巴巴巴巴新的数据，一个研究机构，一个研究，一个研究，一个研究者，一个研究，一个研究者，一个研究者，一个研究，一个关于一个关于一个关于一个关于一个关于一个关于一个关于一个关于一个关于一个关于一CYWVOVBxVTR7WL65.中国政府的一个研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了一个新的研究（文中给出了文中给出了一个新的研究（文中给出了文中给出了文中给出了文中给出了一个研究）的一个新的文中给出了一个新的文中给出了一个新的一个关于一个新的研究（文中给出了文中给出了文中给出了文中给出了文中给出了一个新的一个关于一个关于一个关于一个关于一个新的一个关于一个关于一个新的文文文文中给出了一个新的研究）的一个关于一个关于一个关于一个关于某某某某某某某某某某一个SWQS4YMUJ1BZ0WMCDFHFACYqbppJpXu8rRbV+6HS3fDRDQuQi29dMFjSxdpr0JTphrEorY/E7SQFOFCBUCIJYIN4BAFUILL92MWfZ41ZrqiylBLBAK9RK3KRXLLGSXR3QSKIG6YULKTI4JROVOLGRXDNU6YTQPGOFUJSWTR6J9VLDKVA5W7CFDZ/QpZ8KKKKKKKKKKKKJVFPZR+umzEf7Sz/ZrXLL6YZL6YZUZD+ZL6YZL6YZL6YZUZD+G11XVHKN3L3L3L3L2M4M4M4M4M4M4M2M2M2N4M2N4M4M4M2N4M4M4M4M2K；
显示：块；
浮动：左；
内容：“；
宽度：18px；
高度：18px；
背景大小：100%；
}
李{
列表样式：无；
边缘底部：14px；
高度：22px；
位置：相对位置；
宽度：99%；
}
李：以前{
背景图片：url数据：数据：图像/png；Bas64，IvBoBorwwwwwwww7/6数据：数据：数据：图像/png；基础64，基础64，IvBoBorww7，IvBorw8，IvBorw8，IvBorw8，一个研究一个研究一个研究一个研究一个研究一个1亿BBBvvvvvvvvvvvvvvvvvvvvvvvvj4+O8.6+O8.VVVVVVVVVVVVVVVVVVVVV6/6/6/6/6/8-8-8-8-8-8-8-8-8-6/6/6/6/8-8-8-8-6-6-6-6-1-MVEx6/6/6/6/6/6/6/6/6/6/6/6/6/6/6/6/QESELXNQ2YDZSXL3156QBWY9Z2IK2U目前，这家公司的一些具体的研究成果是一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的研究成果，一个具体的具体的研究成果，一个具体的具体的研究成果，一个具体的具体的具体的研究内容是，一个具体的具体的具体的研究内容是，一个具体的具体的研究内容是，一个具体的具体的具体的具体的具体的研究内容是，具体的具体的具体的具体的具体的具体的研究内容是，具体的研究内容是，具体的具体的是，具体的是，具体的研究内容是，具体的具体的是，具体的具体的具体的具体的具体的是，具体的是，具体的是，具体的是，具体的是，具体的是，具体X20EZ0UF4H29VTU9Z82.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 jywhtydge+A2）2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 CH9LFHJXKG2.在一本书中，在一本书中，在一本书中，在一本书中，在一本书中使用了一个ZGGGGZZGGGGZZGGGZZZZGBBBBBBBBBBGGGGGGGGBBBZZZZZZZZZZGBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBXBS5DKF8GWISX5XnFKKcGb9h8kH2LYZJk/7AAAAABJRU5ERKJGG=='）；
背景大小：100%；
宽度：18px；
高度：18px；
背景重复：无重复；
} 
李斯潘{
显示：内联块；
宽度：90%；
左边距：10px；
}




单击checbox并按enter键

更新：根据您的要求，您可以添加事件侦听器来检测

ul

部分中的任何更改，并从最后一个

li

标记中删除该类

$(document).ready(function(){
   $(document).on('click', 'ul li',  function(){
     $(this).toggleClass('checked');
   });
    $(document).on('click', 'ul li span',  function(e){
     e.stopPropagation();
   });
  $('#editor').on('input', function(){
    $(this).children('li').last().removeClass('checked');
  });
});

您甚至不必选中复选框，您仍然可以编辑内容。这是因为您已经以这样一种方式设置了ul的属性

contenteditable=“true”

。我不确定您为什么希望这样做，但如果必须这样做，则可以在选中复选框后禁用此属性

$(document).ready(function(){
   $(document).on('click', 'ul li',  function(){
     var $this = $(this);
     $this.toggleClass('checked');
     if($this.hasClass('checked')){
       $this.parent().attr('contenteditable', false);
     }
     else {
       $this.parent().attr('contenteditable', true);
     }
   })
    $(document).on('click', 'ul li span',  function(e){
     e.stopPropagation();
   })
});

我找到了正确的答案：答案是监听

domanodeinserted

事件：

  $('#editor').on('DOMNodeInserted', function(e) {
     $(e.target).removeClass('checked');
   });

谢谢你的回复，但这会禁用enter键。我需要用enter键添加列表。你到底想实现什么？我正在创建一个待办事项列表。因此，对于exmp，你在第一个列表中创建一个任务，如果你完成了该任务，你可以单击复选框并标记为完成。如果你想添加另一个任务，只需单击enter，你就可以添加另一个任务。这是一个新任务任务应该被取消选中！我清楚了吗？谢谢你，@VeeK！这只在一种情况下有效。如果你一个接一个地添加列表，而不返回。如果你添加了许多li-s，返回并选中一个复选框，按enter，你可以看到这是同一个问题！：（我可以建议使用预先制作的插件，而不是自己发明它吗？