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，尽管你仍然可以先用鼠标选择删除它。

（在桌面和移动设备以及Android Stock和IE11中使用Chrome和Firefox进行测试）

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

1 个答案: