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

Question

我需要将表单元素(简单的复选框)放置在 contenteditable 内<div /> 。重要的是，复选框不是为了显示 - 用户需要能够单击它们，打开或关闭它们。不幸的是，它们在 contenteditable 时不起作用。已设置 - 无法单击它们或它们的标签，至少在 Firefox 中是这样。

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>

是否可以采取任何措施来解决这个问题，而无需通过 JavaScript 手动处理点击事件？如果没有，处理这些复选框上的点击事件是否是可接受的跨浏览器解决方案？

Answer 1

根据这个answer ，您可以在可编辑 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 上，您无法使用 Backspace 删除不可编辑的 SPAN，但您仍然可以通过先用鼠标选择来删除它。

(在桌面和移动设备上的 Chrome 和 Firefox 以及 Android Stock 和 IE11 中进行了测试)