HTML-метка с другим поведением в Safari

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

Я подозреваю, что неправильно сформированный HTML исправлен Chrome / Firefox для вас, но не исправлен правильно в 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>