防止contenteditable在輸入上添加相同的類

我已將contenteditable="true"設置爲ul，並且我在其中有一個列表。
正如您在每個列表之前所看到的，我設置了checkboxes。如果我點擊複選框，它將切換課程checked。問題是，當我點擊複選框並按下回車鍵時，它會將相同的類checked添加到此添加的列表中。
我不想要添加列表進行檢查。無論如何要防止這一點？防止contenteditable在輸入上添加相同的類

預先感謝您！

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

來源

2016-07-07 Teuta Koraqi

更新：根據您的需求，您可以添加事件偵聽器來檢測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

您甚至不必檢查複選框，您仍然可以編輯內容。這是因爲你已經以這種方式設置了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(); 
    }) 
});

來源

2016-07-07 08:38:40 VeeK

感謝您的回覆，但是這個禁用輸入按鍵。我需要用回車添加列表。 –

你究竟想達到什麼目的？ – VeeK

我正在創建一個ToDo列表。因此，對於exmp，您在第一個列表中創建一個任務，如果您執行該任務，則單擊複選框並標記爲完成。如果您想添加其他任務，只需點擊回車即可添加其他任務。這個新任務應該沒有檢查！我清楚了嗎？ –

後，我發現我的答案的正確的解決方案，你可以禁用這個屬性：解決的辦法是聽DOMNodeInserted事件：

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

來源

2016-07-11 08:07:55

防止contenteditable在輸入上添加相同的類

回答

相關問題