Нажатие на <label> в Mobile Safari

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

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>

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

Ответы

Ответ 1

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

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

В то же время держитесь за это обходное решение - вам это нужно.

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

Ответ 4

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

<label for="myID" onclick="">
 <input type="checkbox" id="myID" name="myNAME">
 Check to check
</label>

Ответ 5

<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 повсюду в теге метки, вам нужно добавить к его прямым дочерним элементам (ожидать ввода), указатель-события: none;

.name-checkbox, .some-info {
      pointer-events: none;
    }

Ответ 6

В 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.

Ответ 7

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

<label for="test" id="test_label" onclick="">

Ответ 8

Если уже есть атрибут onclick, его не следует переопределять, и в моем тесте он работал (атрибут onclick) и также щелкнул флажок. поэтому мое решение:

<script type="text/javascript">
    var labels = document.getElementsByTagName("LABEL");
    var labels_l = labels.length;
    for(var l = 0; l < labels_l; l++){
        if(labels[l].hasAttribute("for") && (!labels[l].hasAttribute("onclick"))){
            labels[l].onclick = function () {};
        }
    }
</script>

Ответ 9

Я просто решил свою аналогичную проблему следующим образом:

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
}

Ответ 10

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

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