Question

我已将contenteditable="true"设置为ul，我在其中有一个列表。
正如你在每个列表之前看到的那样，我设置了checkboxes。如果我点击复选框，它会切换班级checked。问题是，当我单击复选框并按Enter键时，它会将相同的类checked添加到此添加的列表中。
我不想要添加列表进行检查。反正有没有阻止这个？

提前谢谢！

$(document).ready(function(){
   $(document).on('click', 'ul li',  function(){
     $(this).toggleClass('checked');
   })
    $(document).on('click', 'ul li span',  function(e){
     e.stopPropagation();
   })
});

li:before {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABgCAMAAAA6hOw0AAAAaVBMVEX///8AAADIyMiUlJT29vbo6OgqKioFBQVgYGCcnJy4uLj8/Pz5+flkZGS7u7vx8fGxsbFvb29/f3+jo6Pc3NxBQUFpaWmJiYkjIyPBwcHT09M7OztQUFBWVlaqqqpGRkYzMzMVFRUcHBw1SfS9AAACI0lEQVRoge2a25aCMAxFC8Iocr/JiIjo/3/kwDC0KRZqJb7MynlrsGdrm+JaSRl7lh8XUdJ6RsqTY+0GCrNnxVF6sd7UI8xdnX9x2r9r/6cyWvOvbxvtR7WL65Oi+Pe61EqAvXV9oCoFwEP079U85VWGC+hXKv4woEdIvwJ5iUaVcJPnD69Zf0aNlLRV+D1zyTjAlx+VkbOU0OsK6tli28pNWMjlFyWfqW9/jLowqEpkI52hWz7G0ufQFhXw5P5GYhBYfKOYyAWI4xBoVZu/SSA1m2Ec8uHdxyGAdd/3/xeOACZIAOh57jeGDx5vHgOFxI/oczPigxANAExP8JWEkKmTxBG7MbaDS4al+D6ZXnxAsPUzX5XD33SP4EOEL+7qfJqwJwIRiEAEIhCBCEQgAhGIQAQiEIEIRCDCPybcYQULswr3mEw7H1QSUUrSo0QlsWQs4YMUj1Bz0wMcdFhFacYqbppJpXu8rRbV+6HS3fDRDQuQi29dMFjSxdpr0JTphrEorY/E7SqFofcbuCIjYIN4bAfUILL92MWwfz41ZRqIyLblbAK9rKk3KrXLLGsXr3qsKIg6yUlkTi4jrOvOLgrXTEXdnu6yTQPgofUJSWtR6j9vLDkvA5w7CFDz/qpz1c8xkuJkVfpZr+umzEf7Sz/zRXlL6YzUzD+sXG1xvHkn3lyp5t3m21mnd1nS/pBor+YMEPecV2l4MFJ4yrxjobpe9ANLKyWh2BCWAgAAAABJRU5ErkJggg==');
  display: block;
  float: left;
  content: "";
   width: 18px;
   height: 18px;
   background-size: 100%;
}
li {
  list-style: none;
  margin-bottom: 14px;
    height: 22px;
    position: relative;
    width: 99%;
}
li.checked:before {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAABI1BMVEX///8AAABVVVXj4+O8vLw9PT339/d5eXnT09M2NjYA3AD7+/vp6elra2vJyckwMDAXFxfw8PBKSkpRUVEfHx+vr6/27N0MDAzd3d22u2pfX1+Ojo7Q0ND89/GoqKiVlZXq48sv3Q5bzRBA2xFjyRBX0hC6tm2+u4WXvEjUx5aPuTnAwX1H1xKKuzXi2rqntlldqCGRoVxnuxuas0DVzqJzxyZdwQuYuyqQ0SKxv0BqvgTly1qesEDLxnq2yDzSxl3156qBwy9z2iK2uGTy57ny6tXfznTi2qukwyqywU7+++2uv2b35Jf988wqyADm3sEjEgx+eiqfzDVqYSGLkDSKwjNgTSAqHw5xbCaG2yxEOxeOny/SvjuAshjMy1/MxkuHf1OEyWidAAADwUlEQVRYhe2Ya3+aMBSHUUQUtIoXRC0qIrUq1a1ib3NtbbXbukvXdnbrtm77/p9igUCrIUjAt/5faSDP7+Sck0NOKGqjjTbaiEBxWkr4SaKFhRnX1940YavORnNM0kdMNF0tpuw5s0+fvXB8MVeIkKrEVGlz0vTNueyx1mKSmGaLFWZXv6deq2WD4oD+/fn7zoNHp4PjSvenx20ez0uF4H29vTu9z8Tw613gZZh8dLXyuWQ2Evn56+juAbwv4YA1h5at1LdTcT8JUpF96D7Of5hTKoKbJ2RtHvOcXX4yuheT25LlyZr7ad3mJWlCHN+Za4/fvsNZUdcsmoFPcqTmyZcnenNHdOwoos9jcMUFfMDcEnstVRuKlFCBQDaOvFC1xzHexfLKI1Xv3piW2J5HVhaHe6TkstyL11LViWH+5EtwJpI5KWh5JkHEk8dNRYE8iopCE7eWX6HhMEMUYrEMeM22XWDs/Y84PwgQrFdRtLFTsNYGyr0DhVP3bpz/6wLlyxbgzfvPA2sC5Tawjxu1Xyr0ekC5MwE8fSC+DK0HNOYqx6lPjYWhtYDGE+Ap+8bi2DrARlcHvGZ56RO3BlAcAB6n7zaWRsMD5V4L8LiJsTwcGgh4IMCc1kO+6aGBhpkwnNoVkfGwwMYeCDCnjAz0QUggDAinfXQdYvyBMubgI5ebJk9FIkwGnJ7P0El8Z2Q6kBt13KcOf+D11dkUMbJvOZBTB2hEiIDU7Oz07ZKR8thyoHLSp9wiCYp4fHS4kG7yjmbyuOYlhkcW5f7hxWjQd5AwA0GVboQG8sZE1yZlWOYbu3DBLXSPBABa+0xtdjuylTHQwF1X8AMATb8pitIaGnGr5psp49ojgYCUONQVTtH3X7+CPGzKBAGC3DNdp3yxMpBTDjwMJAfydnCh9LFHJxKgODj7zTJwgsvpgEAQas0hYqpMCCAIjOZrYLB6eAOLAqd7GxiwwNplZoWBAYG8YQZGLXsbGPQTIPfA4RJbtkICQS3UtOEKAz2AK87Ysw/vvdpXS/gztt05ZnFdwPRqxYUCRdkXAGj/6PQpaP8CJOPLlq0tODGJdmBF2G5ktldNxoi3m+I0aonT6+VJe0eb59nrOWuOVEi7R1Pxmu3BnNsOOuIQYx5XCG7RrNNk1zFPHRMjhXQMExqX+ESVcaZgm+L44h1GJud358AsvB3Bt4hSNBJOBcwFgaVEPiTP0+mpMMTCyiDWGH/CMi7tcwcg1XMlclySJcgxKVatZAighRxbS5DkF8gwISX5XnFKKcGb9h8kH2LYZJk/7AAAAABJRU5ErkJggg==');
  background-size: 100%;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
} 

li span {
  display: inline-block;
  width:90%;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul contenteditable="true" id="editor">
   <li>
     <span>
       Click on checbox and press enter
     </span>
   </li>
</ul>

Answer 1

更新：根据您的要求，您可以添加一个事件监听器来检测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');
  });
});

Codepen

您甚至不必选中复选框，无论如何都可以编辑内容。那是因为您以这种方式contenteditable="true"设置了ul的属性。我不确定您为什么要这样，但如果必须，那么您可以在选中复选框后禁用此属性

$(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();
   })
});

Answer 2

我找到了正确的答案：解决方案是监听DOMNodeInserted事件：

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

防止contenteditable在enter上添加相同的类

2 个答案: