CODEWITHSUNDEEP
jqueryhtml
Teuta Koraqi
Teuta Koraqi

Reputation: 1898

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>

Upvotes: 1

Views: 104

Answers (2)

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

I found the right solution of my answer: The solution was listening DOMNodeInserted event:

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

Upvotes: 0

Whip
Whip

Reputation: 2224

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

Upvotes: 1

Related Questions