Когда вы фокусируетесь на тексте input в мобильном браузере (проверенном на iOS Safari и Chrome), курсор текста отображается поверх любой div, помещенной сверху.
Вот простой, простой пример: http://jsfiddle.net/XQf8N/
Вот скриншот эффекта:
Каким будет лучший способ обойти это?
Я попробовал ответить здесь: JQuery Mobile: сфокусированный входной текст не учитывает z-индекс, появляющийся выше всего остального, но он не работает.
ОБНОВЛЕНИЕ. После некоторого дополнительного копания я также попытался сделать $("input").blur(); при переключении меню div, но это, похоже, не работает на мобильном устройстве, оно удаляет фокус на рабочий стол хотя.
ОБНОВЛЕНИЕ 2 Может быть связано с этим: iPad Safari не запускает событие размытия, хотя, если я размываю текстовое поле в setTimeout, а не в прослушивателе событий, текстовое поле действительно размывается. Смотрите эту скрипту: http://jsfiddle.net/XQf8N/17/
ОБНОВЛЕНИЕ 3 Попытка передать ввод в скрытое текстовое поле, похоже, не работает http://jsfiddle.net/XQf8N/23/
ОБНОВЛЕНИЕ 4 Реализовано Я не смотрел на скрытие курсора, как было предложено - http://jsfiddle.net/XQf8N/24/ - это просто скрывает указатель мыши при наведении курсора на текстовое поле, ничего не делает для каретки
ОБНОВЛЕНИЕ 5 Предложение отключить текстовое поле, это не теряет фокус и не закрывает клавиатуру http://jsfiddle.net/XQf8N/27/
ОБНОВЛЕНИЕ 6 Это решение: qaru.site/info/47193/... не работает в прослушивателе событий, см. скрипт: http://jsfiddle.net/XQf8N/29/
ОБНОВЛЕНИЕ 7 Это решение: qaru.site/info/47193/... тоже не работает, тот же результат, что и отключение текстового поля
ОБНОВЛЕНИЕ 8 Размытие текстового поля внутри функции, связанной с использованием нокаутов: http://jsfiddle.net/XQf8N/33/ p >
Любые идеи, что не так с исходным прослушивателем событий? Надеюсь, это устранение неполадок будет полезно для кого-то, если у них будет такая же проблема.
ОК, не уверен, что произошло со скрипкой, но это работает: http://jsfiddle.net/XQf8N/33/
Это то же самое, за исключением того, что вместо ручного прослушивания событий и вызова blur() в текстовом поле, blur() запускается из привязки нокаута.
Как я использую нокаут, я могу также размыть текстовое поле в привязке события нокаута.
Вы должны попробовать выполнить этот код document.activeElement.blur(); сразу после открытия меню.
Я смог использовать visibility: hidden; для своего решения.