带有复选框的 ContentEditable 标签失去焦点答案

【问题标题】：ContentEditable label with checkbox inside loses focus带有复选框的 ContentEditable 标签失去焦点
【发布时间】：2018-04-20 22:33:14
【问题描述】：

在 Chrome（也可能还有其他基于 WebKit 的浏览器）上，我遇到一个问题，如果复选框包含在标签内并且标签具有属性 contenteditable=true，Chrome 无法正确关注标签。

&lt;label contenteditable="true"&gt;hello &lt;input type="checkbox" /&gt;&lt;/label&gt;

单击文本无法聚焦，而是选中复选框。

要专注于文本，需要选择一些文本，然后单击所选内容以看到光标闪烁。

要查看想要的行为，请检查 Internet Explorer 11。单击文本本身会选择文本，单击复选框会选中复选框。

是否有任何解决方法（除了更改 HTML）？

【问题讨论】：

其实这是一个标签应该做的：developer.mozilla.org/de/docs/Web/HTML/Element/label
确实，一个标签应该点击它里面的输入。但是，当标签是 contenteditable 时，不应该点击标签内的文本节点放置光标而不是点击它旁边的输入？
取决于你的观点.. 但是为什么不直接使用 span 让 html 元素做他们应该做的事情呢？
@BinarMorker 不。为什么contenteditible 应该改变原生行为？
此内容是用户在编辑器中生成的。我无法回去将所有内容更改为跨度。我同意将其更改为跨度会起作用，但这种解决方案对我来说似乎不可行。

标签： javascript html

【解决方案1】：

这是一个标签应该做的事情。它们使与表单域的交互更容易（尤其是在小型设备上）。这是为了更好的 UI 可访问性。

要查看想要的行为，请检查 Internet Explorer 11。单击在文本本身上选择文本，然后单击复选框选中复选框。

您只需使用 <span> 代替：

&lt;span contenteditable="true"&gt;hello &lt;input type="checkbox" /&gt;&lt;/span&gt;

【讨论】：

【解决方案2】：

Actually that is what a label is supposed to do

如果您坚持将其作为标签，则必须阻止其默认行为并取消复选框本身的传播：

<!-- Dirty example -->
<label contenteditable="true" onclick="event.preventDefault()">hello <input type="checkbox" onclick="event.stopPropagation();" /></label>

就像我之前评论的那样，我不会推荐这个。让标签做他们应该做的事情并使用跨度来代替。

【讨论】：