Cordova/Phonegap 3.4.0 iOS 7.1 - Проблема с клавиатурой/веб-просмотром

Я борюсь с этой проблемой уже более недели и буду очень благодарен за любую помощь, которую я могу получить. Я объясню вопрос, насколько я понимаю, но, пожалуйста, исправьте, если я скажу что-нибудь неправильное.

В iOS 7.0.x, когда клавиатура стала отображаться, веб-просмотр был изменен таким образом, что область, занятая клавиатурой, не считалась частью размера окна видового экрана. До 7.0 плагин Cordova Keyboard обрабатывал это изменение размера веб-страницы. Так как 7.0 изначально обработали клавиатуру раскрыть желаемым образом, опция Keyboard shrinkView для файла config.xml стала "No-op" по сравнению с этой фиксацией:

https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

Однако в 7.1 область, занимаемая клавиатурой, появляется поверх веб-представления. Это имеет болезненный побочный эффект. Предположим, вы хотите добавить <div> к телу с областью textarea (например, оставить комментарий или ответ чата), т.е.

<body>
  <div id="app">...</div>
  <div id="reply">
    <textarea></textarea>
  </div>
</body>

пример CSS:

body {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}
#reply {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

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

Я пробовал следующие вещи:

Futzing с CSS для тела и фиксированным div. Позиция фиксированная/абсолютная не имеет значения. Установка явной высоты для тела ничего не делает.
Все возможные комбинации параметров мета-просмотра. Это то, что я сейчас использую:

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

Разоружение "No-op" в плагине клавиатуры cordova. Это все еще нарушает компоновку, как в iOS 7.0.x.
Наличие прослушивателей событий JS в событиях input и focus, чтобы продолжить вычисление нижнего смещения, чтобы сохранить div внизу. Это очень скачкообразно, потому что он борется с поведением собственного веб-представления центрирования поля ввода.
Изменение метатега для установки явной высоты после показа/скрытия клавиатуры.

Я использую Cordova 3.4.0-0.1.3

Кто-нибудь еще испытал эту проблему? Любые решения или идеи?

Ответ 1

Быстрое исправление для меня включало принуждение окна к прокрутке назад в позицию, когда вход теряет фокус:

$("input").on('blur',function(){

 //set brief timeout to let window catch up
 setTimout(function(){

   //reposition at top left corner of screen
   window.scrollTo(0,0);

 },20); 

});

Надеюсь, что это поможет!

Ответ 2

Похоже, что у Ionic есть многопартийное решение этой проблемы, которое включает динамическое обновление тега meta viewport в зависимости от устройства, а также подключение к клавиатуре hide/show event, а затем использование их рамки прокрутки для прокрутки ввода в представлении.

Подробнее здесь.. http://ionicframework.com/blog/ionic-keyboard/

Это требует от вас использования их фреймворка, поэтому я переношу это на JQuery и IScroll, и я буду держать вас в курсе моих успехов.

Я также разместил свой опыт работы с клавиатурой phonegap на форуме phonegap, но пока не получил ответа. https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c

Ответ 3

Я испытываю несколько схожую проблему. У меня есть приложение cordova 3.3.0 в сочетании с Sencha Touch.

Проблема, с которой я столкнулся, до того, как iOS 7.0 состояла в том, что строка заголовка вышла за верх экрана, когда клавиатура подошла. Клавиатура просто использовала для увеличения всего окна просмотра. После большого поиска и тяжелой работы я смог частично исправить проблему, выполнив анимацию счетчика, чтобы переместить панель заголовка вниз, когда клавиатура поднималась, используя события фокуса и размывания текстового поля.

iOS 7.0 стал счастливым сюрпризом, поскольку он исправил эту проблему изначально. Я прокомментировал мое исправление (к счастью, не удалял), и строка заголовка оставалась неподвижной наверху без каких-либо дополнительных усилий.

Кажется, iOS 7.1 вернул это исправление (интересно, почему?). Когда я обновился до iOS 7.1, проблема с заголовком вернулась, и теперь у меня нет выбора, кроме как раскомментировать неуклюжие исправления. Может ли кто-нибудь дать какое-нибудь лучшее или постоянное решение для решения этой проблемы?

Ответ 4

Помогает ли это решить вашу проблему?

Проверьте свои метатеги html на что-то вроде этого:

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

Замените это следующим образом:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />