Команда HTML <label>не работает в браузере Iphone

Question

На html-странице, которую я делаю, я пытался сделать клик на div с помощью html и css.Это отлично работало в некоторых основных браузерах, в которых я тестировал (Chrome, Firefox, Opera, Safari), а также на телефоне HTC, но когда я попытался протестировать его на Iphone, я заметил, что он просто не работает.Сами флажки даже не были выбраны.

Это мой (работает отдельно от Iphone) код:

HTML:

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS:

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

Итак, как вы можете видеть, техника, которую я использую, в основном просто имеет <label> распространение по всему родительскому элементу div, поэтому, где бы вы ни щелкнули, он будет отмечать / снимать галочку со связанного флажка.1014 * К сожалению, это не работает на IPhone.Можно ли будет как-то продолжать использовать эту технику, но также обеспечить поддержку IPhone?(Желательно без javascript, потому что я действительно стараюсь изо всех сил использовать только HTML и CSS)

Заранее спасибо,

Arne

Answer 1

Добавление пустого onclick="" к метке делает элемент снова активным в IOS4.Похоже, что по умолчанию действие блокируется или отменяется при нажатии и удержании для копирования и вставки текстовой механики.

<label for="elementid" onclick="">Label</label>

Answer 2

Проблема, похоже, сохраняется в iOS9, если внутри метки содержатся какие-либо элементы html. По крайней мере, происходит с элементами span внутри. 'pointer-events: none' исправляет это.

<label for="target">
  <span>Some text</span>
</label>

Приведенный выше код не будет вызывать изменение целевого ввода, когда пользователь нажимает «Некоторый текст», если вы не добавите следующий код:

label span {
  pointer-events: none;
}

Answer 3

Я решил это, поместив пустой onclick = "" в родительский элемент:

<form onclick="">
    <input type="radio" name="option1" value="1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option2" value="2">
    <label for="option2">Option 2</label>

    <input type="radio" name="option3" value="3" checked="checked">
    <label for="option3">Option 3</label>
</form>

Answer 4

По какой-то непонятной причине, используя CSS, если вы примените:

label { cursor: pointer; }

Будет работать на iPhone и iPad .

Answer 5

Я столкнулся с несколько уникальной ситуацией. Мы уже использовали pointer-events: none на всех spans в labels. Однако затем нам нужно было добавить <a> как кликабельный в пределах одного из этих ярлыков.

<label>
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>

Итак, мы явно установим pointer-events: all на эти <a>.

label > span { pointer-events: none; }
label > span > a { pointer-events: all; }

Это работает в последних версиях Chrome, Firefox, IE 11 и iOS 9.

Answer 6

Другое решение - пусть и более хакерское, но пуленепробиваемое - состояло бы в том, чтобы абсолютно установить флажок над меткой, z-индексировать его, увеличить ширину / высоту, чтобы охватить нижележащую метку, а затем 0 прозрачности. Это, конечно, было бы утомительно, если на странице несколько ярлыков ... Естественно, вы бы также реализовали абсолютное позиционирование для этого размера носителя; не нужно взламывать всю среду приложения.

Answer 7

Я сузил свою проблему до использования библиотеки Fastclick; когда я удалил его из своей кодовой базы, мои проблемы исчезли, что говорит мне о том, что нет собственной проблемы iOS / FF, как предлагают другие ответы здесь.

Не зная библиотек, которые используют другие люди, но зная, что Fastclick является исключительно распространенным явлением, могу ли я предположить, что основной причиной этой ошибки на самом деле является проблема с библиотекой, а не та, которая сохранилась за годы выпуска Apple! Это кажется более вероятным. Может быть, другие здесь могут пролить свет на то, используют ли они Fastclick?

Подробнее

Некоторые браузеры предотвращают запуск файлового ввода клиентским кодом в качестве меры безопасности. Попробуйте вызвать событие click из консоли с помощью document.querySelector('input[type=file]').click(), и оно сработает, сделайте то же самое с вашим кодом, и оно загадочным образом завершится неудачей.

Я предполагаю, что причина этой ошибки в том, что Fastclick применяет обработчик ontouchstart к <label />. Когда оно запускается на сенсорном устройстве, библиотека передает это событие в обработчик onclick или, в этом случае, в встроенную функцию <label />. К сожалению, это означает, что клиентский код вызывает открытие ввода файла и блокируется браузером.

Answer 8

Если вы измените DOM в обработчике событий (например, в onMouseEnter), по этой причине пропустите все следующие обработчики, включая onClick.

SetTimeout не исправит это.

Пример: 1. в onMouseEnter использовать setTimeout с функцией, добавляющей новый div в DOM 2. любой обработчик onClick не вызывается.

Решение: избегать изменения DOM в обработчике событий.

Примечание: обнаружена проблема для тега метки, но она сохраняется для диапазона внутри метки.Эта проблема может присутствовать в тегах любого типа.

Это поведение встречается только для мобильных iOS.В настольном Safari и Mac OS Safari - все хорошо.