Нажав на <label>в мобильном сафари - PullRequest
Новая
       23

Нажав на <label>в мобильном сафари

32 голосов
/ 09 сентября 2011

Нажатие на <label> не связывает автофокус в Mobile Safari, но если определена пустая функция в качестве обработчика кликов как это 

document.getElementById("test_label").onclick = function () {};

решает проблему.

Это полный исходный код. 

<body>
    <input type="checkbox" id="test" name="test">
    <label for="test" id="test_label">This is the label</label>
    <script>
      document.getElementById("test_label").onclick = function () {};
    </script>
</body>

Вы знаете, почему это работает?

Ответы [ 11 ]

41 голосов
/ 11 мая 2015

Люди, использующие FastClick:

Используйте этот CSS: 

label > * {
    display: block;
    pointer-events: none;
}

см. Эту проблему: https://github.com/ftlabs/fastclick/issues/60

и этот код: http://codepen.io/visnup/pen/XJNvEq

24 голосов
/ 05 января 2012

Мы смогли обойти эту проблему в Etsy, просто добавив эту единственную строку кода в наш глобальный файл javascript. 

$('label').click(function() {});

Мы используем библиотеку xui micro js, ​​и эта строка просто присоединяетпустой обработчик кликов для всех label элементов.По какой-то причине это волшебным образом решает проблему мобильного сафари.

15 голосов
/ 12 сентября 2011

Похоже, вы нашли ошибку в iOS Safari.Поздравляем!Поиск и сообщение об ошибках вызывает привыкание.

Вы можете сообщить об этой и других ошибках в Apple по адресу https://bugreport.apple.com/. Apple может не сразу отреагировать, но в какой-то момент в будущем они должны уведомить вас, что это былодубликат существующей ошибки, которую они не считают ошибкой, или (если вам повезет), что вы должны протестировать ее снова в новой версии iOS.

А пока удерживайтена этот обходной путь - он вам понадобится.

5 голосов
/ 19 мая 2016 
<label for="myID" onclick="">
  <input type="checkbox" id="myID" name="myNAME">
  <span class="name-checkbox"> My name for my checkbox </span>
  <span class="some-info">extra informations below</span>
</label>

Чтобы включить касание iOS в любом месте тега метки, необходимо добавить к его прямым дочерним элементам (ожидаемый ввод) события указателя: нет; 

.name-checkbox, .some-info {
      pointer-events: none;
    }
4 голосов
/ 09 августа 2012

я знаю, что это не очень хорошая разметка: я просто жестко запрограммировал пустой клик onclick="" на каждом ярлыке. Это сработало на упаковочной этикетке: 

<label for="myID" onclick="">
 <input type="checkbox" id="myID" name="myNAME">
 Check to check
</label>
2 голосов
/ 19 января 2015

добавление атрибута onclick решит проблему. 

<label for="test" id="test_label" onclick="">
2 голосов
/ 15 апреля 2014

В iOS 7 эта проблема все еще сохраняется без каких-либо обходных путей для меня.

Моим решением было объединить событие click с touchend: 

var handler = function(e) { /* do stuff */ };
$("ol input[type=checkbox] ~ label")
  .on('touchend', handler)
  .on('click', handler);

Некоторая полезная информация в этом выпуске JQuery: http://bugs.jquery.com/ticket/5677 Особенно в части, где говорится, что технически нет события click на мобильном телефоне.

1 голос
/ 23 марта 2018

или вы можете позволить for = "" и фокусировать ввод при нажатии на метку, вот код работы в реаги 

<input ref={(node) => { this.input = node; }} />

<label htmlFor="" onClick={() => { this.input.focus();}}/>
0 голосов
/ 05 февраля 2017

У меня происходит действительно странное поведение, когда ни один из вышеперечисленных не исправит это.Если бы я поместил текст или изображения внутри элемента label, нажатие на этот элемент не сработало.Однако, когда я добавил поля и отступы к метке, щелкнув поле или отступ, но не текст / изображения, сработало.Итак, я сделал ярлык 100% и 100% ч абсолютно поверх текста и изображений.

<div class="wrapper">
  <label class="label-overlay" for="file"></label>
  <img src="something.png">
  <p>Upload File</p>
  <input type="file" name="file">
</div>


<style>
  .wrapper{display:inline-block;}
  .label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;}
</style>
0 голосов
/ 23 декабря 2015

Я только что решил похожую проблему: 

input {
position: absolute;
width: 120px; // size of my image
height: 100px; // size of my image
opacity: 0;
display: inherit; // Because i'm hidding it on other resolutions
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...