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

Question

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

<label contenteditable="true">hello <input type="checkbox" /></label>

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

要关注文本，必须选择一些文本，然后单击选择以查看光标闪烁。

要查看所需行为，请检查Internet Explorer 11.单击文本本身将选择文本，然后单击复选框将选中该复选框。

有没有解决此问题（除了更改HTML）？

Answer 1

这就是标签应该做的事情。它们使表单字段的交互更容易（特别是在小型设备上）。这是为了更好的UI可访问性。

要查看所需行为，请检查Internet Explorer 11.单击文本本身将选择文本，然后单击复选框将选中该复选框。

你需要使用<span>代替：

<span contenteditable="true">hello <input type="checkbox" /></span>

Answer 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>

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