使用表单元素 - 复选框 - contenteditable div 内

Question

我需要将表单元素（简单的复选框）放置在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 手动处理点击事件吗？如果没有，处理这些复选框上的点击事件是否是可接受的跨浏览器解决方案？

Answer 1

根据这个答案，您可以在可编辑的 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 中进行了测试）