Question

我有一个复选框和一个标签，在标签内有一个输入框。当我在输入框中写东西时，我不希望复选框切换（启用/禁用）。在Chrome和Firefox上它工作正常，但在Safari上选择标签内的输入也会切换复选框。我怎样才能防止这种情况发生？

这是我的代码：

<div>
 <input type="checkbox" name="xyz" id="xyz">
 <label for="xyz">
  <input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
 </label>
</div>

Answer 1

最佳解决方案可能是将<input type="number">移到<label>之外。

示例：

<div>
 <input type="checkbox" name="xyz" id="xyz">
  <p>
   <input type="number" name="qty" id="qty">
   <label for="xyz">
      This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
   </label>
  </p>
</div>

请记住，所有表单元素都应该有相应的标签。

了解有关标签的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

我怀疑Chrome / Firefox正在修复格式错误的HTML，但在Safari中无法正确修复。您应该在每个浏览器中检查调试器中的div，并查看每个DOM为您提供的确保内容。

你有：

<div>
 <input type="checkbox" name="xyz" id="xyz">
 <label for="xyz">
  <input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
 </label>   
</div>

您可以使用相同的意图来执行此操作：

<div>
 <input type="checkbox" name="xyz" id="xyz">
 <label for="xyz">
  This is my label for xyz checkbox
  <input type="number" name="qty" id="qty"/>
 </label>   
</div>

Safari

2 个答案: