使用表单元素 - 复选框 - 在contenteditable div中 [英] Using form elements - checkboxes - inside contenteditable div

问题描述

我需要在 contenteditable < div /> 中放置表单元素（简单复选框）。重要的是复选框不是用于显示 - 用户需要能够点击它们，打开或关闭它们。不幸的是，当设置 contenteditable 时它们不起作用 - 不可能点击它们或它们的标签，至少在Firefox中是这样。

I need to place form elements (simple checkboxes) inside a contenteditable <div />. It's important that checkboxes are not not for show - user needs to be able to click on them, turning them on or off. Unfortunately, they don't work while contenteditable is set - it's not possible to click on them nor their labels, at least in 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手动处理点击事件来解决这个问题？如果没有，那么处理这些复选框上的点击事件是否是可接受的跨浏览器解决方案？

Is there anything that can be done to remedy that without handling the click event manually via JavaScript? And if there isn't, will handling the click events on those checkboxes be an acceptable cross-browser solution?

推荐答案

根据在答案中，您可以在可编辑的DIV中创建不可编辑的DIV或SPAN。只需将您的复选框包装在一个SPAN中，您就会有一个可点击的复选框。

According to this answer, you can create a non-editable DIV or SPAN inside an editable DIV. Simply wrap your checkbox in a SPAN and you will have a clickable checkbox.

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

Unfortunately, on Firefox you cannot delete a non-editable SPAN by using Backspace, though you can still delete it by first selecting with mouse.

（在桌面和手机以及Android股票的Chrome和Firefox中测试过）和IE11）

这篇关于使用表单元素 - 复选框 - 在contenteditable div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！