Verwenden von Formularelementen - Kontrollkästchen - innen contenteditable div

Question

Ich muss Formularelemente (einfache Kontrollkästchen) in einem contenteditable<div /> platzieren. Es ist wichtig, dass die Kontrollkästchen nicht für die Show geeignet sind - der Benutzer muss in der Lage sein, darauf zu klicken und sie ein- oder auszuschalten. Leider funktionieren sie nicht, während contenteditable eingestellt ist - es ist nicht möglich, zumindest in Firefox auf sie oder ihre Labels zu klicken.

Here's a demo

$('#enable-edit').change (function() { 
 
    $('div').attr('contenteditable', $(this).prop ('checked') ? 'true' : 'false'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true"> 
 
    <p> 
 
    <input type="checkbox" id="fail" /><label for="fail">You cannot click on me (nor edit this text) if contenteditable is true</label> 
 
    </p> 
 
    <p> 
 
    ...but you can edit this text 
 
    </p> 
 
</div> 
 

 
<input type="checkbox" id="enable-edit" checked /><label for="enable-edit">Enable contenteditable</label>

Gibt es etwas, dass das Click-Ereignis zu beheben getan werden kann manuell über JavaScript ohne Behandlung? Und wenn nicht, wird die Handhabung der Klickereignisse auf diesen Kontrollkästchen eine akzeptable browserübergreifende Lösung sein?

Answer 1

Entsprechend dieser answer können Sie eine nicht bearbeitbare DIV oder SPAN in einem bearbeitbaren DIV erstellen. Wickeln Sie einfach Ihr Kontrollkästchen in einen SPAN und Sie haben ein anklickbares Kontrollkästchen.

<div id="editor" contenteditable="true"> 
    <span contenteditable="false"><input type="checkbox" id="fail" /></span>And you can still edit this text 
</div> 

Leider auf Firefox können Sie keine nicht bearbeitbaren SPAN unter Verwendung Rück löschen, wenn Sie es noch, indem man zuerst die Auswahl mit der Maus löschen.

(getestet in Chrome und Firefox auf Desktop- und mobile sowie in Android Bestands- und IE11)