在Chrome（以及可能还有其他基于WebKit的浏览器）上，我遇到一个问题，即如果复选框包含在标签内且标签的属性为contenteditable = true，则Chrome无法正确关注标签。
<label contenteditable="true">hello <input type="checkbox" /></label>
单击文本无法聚焦，而是选中复选框。
要关注文本，必须选择一些文本，然后单击选择以查看光标闪烁。
要查看所需行为，请检查Internet Explorer 11.单击文本本身将选择文本，然后单击复选框将选中该复选框。
是否有任何解决方法（除了更改HTML）？
答案 0 :(得分：0)
这是标签应该做的事情。它们使表单字段的交互更容易（特别是在小型设备上）。这是为了更好的UI可访问性。
要查看所需行为，请检查Internet Explorer 11.单击 在文本本身选择文本，然后单击复选框 选中复选框。
您只需使用<span>代替：
<span contenteditable="true">hello <input type="checkbox" /></span>
答案 1 :(得分：0)
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>
就像我以前评论过的那样，我不推荐这个。让标签做他们应该做的事情并改为使用跨度。