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

На html-странице, которую я создаю, я попытался сделать div clickable с помощью 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, так что вы можете щелкнуть галочкой/отключить связанный флажок.

К сожалению, это не работает на IPhone. Можно ли как-то продолжать использовать эту технику, но также обеспечить поддержку IPhone? (Предпочтительно без javascript, потому что я действительно не согласен использовать HTML и CSS)

Спасибо заранее,

Арне

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

label span {
  pointer-events: none;
}

Ответ 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>

Ответ 4

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

label { cursor: pointer; }

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

Ответ 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.

Ответ 6

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

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

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

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

Примечание: проблема найдена для метки метки, но по-прежнему сохраняется для интервала внутри метки. Может быть, эта проблема присутствует в тегах любого типа.

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

Ответ 7

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

Ответ 8

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

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

Дополнительная информация

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

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