Teuta Koraqi Teuta Koraqi - 4 months ago 10
jQuery Question

Prevent contenteditable adding same classes on enter

I have set

contenteditable="true"
to
ul
, and I have a list inside this.
As you can see before each list I've set
checkboxes
. If I click on checkbox, it toggles class
checked
. The problem is, when I click checkbox, and press enter, it adds same class
checked
to this added list.
I don't want added list to be checked. Is there anyway to prevent this?

Thank you in advance!



$(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

Update: Based on your requirements you can add an event listener to detect any change in the ul section and remove the class from the last li tag

$(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

You don't have to even check the checkbox, you can edit the contents anyway. That's because you've set the property of the ul in such a way contenteditable="true". I'm not sure why you'd want that but if you must, then you can disable this property after the checkbox has been checked

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