Курсор ввода текста (каретка) появляется над другими элементами в мобильном браузере

Когда вы фокусируетесь на тексте input в мобильном браузере (проверенном на iOS Safari и Chrome), курсор текста отображается поверх любой div, помещенной сверху.

Вот простой, простой пример: http://jsfiddle.net/XQf8N/

Вот скриншот эффекта:

enter image description here

Каким будет лучший способ обойти это?

Я попробовал ответить здесь: 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 >

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

Ответ 1

ОК, не уверен, что произошло со скрипкой, но это работает: http://jsfiddle.net/XQf8N/33/

Это то же самое, за исключением того, что вместо ручного прослушивания событий и вызова blur() в текстовом поле, blur() запускается из привязки нокаута.

Как я использую нокаут, я могу также размыть текстовое поле в привязке события нокаута.

Ответ 2

Вы должны попробовать выполнить этот код document.activeElement.blur(); сразу после открытия меню.

Ответ 3

Я смог использовать visibility: hidden; для своего решения.