Проблема всплывающих окон клавиатуры iphone в приложениях PhoneGap?

Я создаю новые приложения для iphone, используя phonegap(cordova). У меня была одна проблема с моим приложением. Если я нажимаю на любое поле ввода, появляется всплывающая клавиатура iphone, а также меняется положение всей страницы. Как фиксированный нижний колонтитул всплывающее над клавиатурой. Пожалуйста, направьте меня.

Спасибо

Источник

1 ответ

Это сложная проблема, чтобы получить "право". Вы можете попытаться скрыть нижний колонтитул на фокусе элемента ввода и показать размытость, но это не всегда надежно для iOS. Время от времени (скажем, один раз в десять на моем iPhone 4S) событие фокусировки, похоже, не срабатывает (или, может быть, присутствует состояние гонки), и нижний колонтитул не скрывается.

После долгих проб и ошибок я нашел это интересное решение:

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

По сути: используйте JavaScript для определения высоты окна устройства, затем динамически создайте медиазапрос CSS, чтобы скрыть нижний колонтитул, когда высота окна уменьшается на 10 пикселей. Поскольку открытие клавиатуры изменяет размер экрана браузера, это никогда не сбоит на iOS. Поскольку он использует движок CSS, а не JavaScript, он гораздо быстрее и плавнее!

Примечание: я обнаружил, что использование "видимости: скрытый" менее затруднительно, чем "отображение: нет" или "позиция: статическая", но ваш пробег может отличаться.

Источник
Другие вопросы по тегам