Клавиатура скрывает поля ввода iOS в PhoneGap Build 3.1 с iFrame/object и JQTouch

Question

Я разрабатываю приложение, которое загружает форму с другого сайта в iFrame. IFrame устанавливается на 100% ширину и высоту при отображении. Этот сайт имеет JQTouch.

Когда я касаюсь поля ввода в iOS 7 на iPhone, клавиатура всплывает и закрывает поля ввода. Он не прокручивает, не изменяет размер или даже не позволяет прокручивать вниз, чтобы увидеть поле ввода. Если я набираю и закрываю клавиатуру, ничего не происходит.

Я пробовал все, с чем сталкивался. Добавление/удаление высоты = высота устройства в метафоре метаданных ничего не делала. То, что ближе всего к решению, добавило предпочтение «KeyboardShrinksView = true» в файле config.xml. Это заставило его прокрутить (но не достаточно) и постоянно нажимать на сайт примерно 20 пикселей или около того.

Я работаю над этим в течение последних двух дней без решения проблемы. Это ошибка? Как JQTouch взаимодействует с PhoneGap Build?

ОБНОВЛЕНИЕ: По-прежнему нет исправлений, но для проверки я взял страницу формы из iframe и установил ее с помощью window.location.href = "www.mywebsite.com"; В этой ситуации клавиатура работает. Это недействительное решение для меня (пока), но может предоставить информацию о том, почему он не работает.

ОБНОВЛЕНИЕ 2: Я реструктурирую приложение, чтобы использовать window.location.href, а не объект iframe или html. Это создает некоторые небольшие проблемы, но они лучше, чем клавиатура не работает. Если у кого-то есть ответ, я все равно хочу его увидеть.

Answer 1

Основное Редактирование: Я только понял, что плагин InAppBrowser НЕ исправляет ошибку клавиатуры. Я сделал еще несколько исследований, и this topic helped. Я должен был добавить «height = device-height» к каждому тегу meta viewport. «width = device-width» должно исправить любые проблемы с просмотром сайта в мобильном Safari. Окончательный результат:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, 
    maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/> 

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

Если это не сработает, есть другое решение, которое вы можете попробовать вместо или в дополнение к исправлению мета-видового экрана. Это несколько комментариев в этой теме, которую я связал, и включает некоторые изменения в CSS. Изменения в этом ничего не фиксировали в моем коде, но это помогло хотя бы одному человеку, поэтому стоит проверить, все ли вам нужно решение.

Я проверил это исправление с iframe и объектом, и это не сработало - InAppBrowser по-прежнему необходим.

/Major Edit.

Вот некоторые обходные пути, которые работали для меня:

1. Use the InAppBrowser plugin. Это позволяет приложению взаимодействовать с событиями loadstart/loadstop/loaderror на загруженной странице внутри InAppBrowser. Это решение, которое я предлагаю. Однако с iOS 7 вам нужно будет скрыть строку состояния вручную, решение которой составляет here

2. ИЛИ Загрузите страницу с помощью window.location.href = [url сайта]. Если вам не нужно беспокоиться о том, чтобы взаимодействовать с или возвращаться в приложение или ссылаться на внешние сайты (оба из которых мне нужны), это путь. Это довольно просто, но не хватает некоторых функций первого решения.

3. ИЛИ Избавьтесь от JQTouch. Я не смог этого сделать, но многое из этого лишнее, когда вы создаете приложение с помощью PhoneGap.