我需要将表单元素（简单的复选框）放在内contenteditable <div />。重要的是不要不显示复选框-用户需要能够单击它们，将其打开或关闭。不幸的是，设置后它们无法正常工作contenteditable-至少在Firefox中，无法单击它们或标签。
$('#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>如果没有通过JavaScript手动处理click事件，有什么办法可以解决？如果没有，处理那些复选框上的click事件是否可以作为跨浏览器的解决方案？
根据此答案，您可以在可编辑的DIV中创建不可编辑的DIV或SPAN。只需将您的复选框包装在SPAN中，您将拥有一个可单击的复选框。
<div id="editor" contenteditable="true">
<span contenteditable="false"><input type="checkbox" id="fail" /></span>And you can still edit this text
</div>
不幸的是，在Firefox上，您无法使用来删除不可编辑的SPAN Backspace，尽管您仍然可以先通过鼠标选择将其删除。
（已在台式机和移动设备上的Chrome和Firefox以及Android Stock和IE11中进行了测试）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句