Android HTML5 – мягкая клавиатура перекрывает входное поле

Я немного устал искать решение для перекрытия поля ввода с помощью мягкой клавиатуры на Android. Моя проблема очень похожа на эту: Мягкая переадресация клавиатуры с полем EditText, хотя в этом случае она встречается в HTML5, а не в собственном приложении.

Точнее: когда поле ввода полностью покрывается клавиатурой, прокручивается целая страница, и это поле становится видимым – это нормально. Но если этот вход находился на краю видимой области (после появления клавиатуры), моя мягкая клавиатура перекрывает его, и страница вообще не будет прокручиваться. Страница будет прокручиваться сразу после ввода первого знака.

Мой клиент не любит такое поведение … Это происходит точно на Galaxy Tab 10 "- Android 4.0.3, планшет Lenovo – Android 3.1.

Я попытался установить высоту ввода, используя box-sizing:border-box; , -webkit-appearance: textfield; , -webkit-user-select: text; , -webkit-writing-mode: horizontal-tb; , -webkit-rtl-ordering: logical; И еще несколько, но ничего не получилось.

У вас есть идея? Я бы предпочел CSS-решения, прокрутка страницы javascript для меня не является ответом (требования клиентов).

Возможно, это просто ошибка веб-браузера Android без каких-либо обходных решений или какой-либо конкретной проблемы из-за стиля родителей (я уже пытался удалить все position: absolute свойства)?

Все предложения приветствуются.

Solutions Collecting From Web of "Android HTML5 – мягкая клавиатура перекрывает входное поле"

У меня была эта неприятная проблема, связанная с моей картой css – mobile-angular-ui. Так что это известная ошибка в Интернете, и я потратил несколько часов на поиск исправления в Интернете, но, к сожалению, ни одно из предлагаемых решений не разрешило мой конкретный случай. Наконец, я провел некоторое тестирование, и выяснилось, что это поведение вызвано используемой каркасом. (Я сообщал об этом авторам мобильных углов, но я не получил ответа.) Вероятно, вы хотите сделать несколько тестов, как и я, чтобы выяснить, действительно ли эта проблема связана с архитектурой вашего приложения. Комментируйте весь код css и начинайте с пустой, чистой html-страницы с формами на ней. Если все в порядке (форма должна прокручиваться вверх, чтобы отображаться в видимой части обзора, выше мягкой клавиатуры), когда ваш css закомментирован / выключен, ваша проблема лежит в css, как и в моем случае. Для тех, кто использует mobile-angular-ui в своих приложениях и попадает в эту проблему, этот кусок кода сделал для меня работу:

 html { overflow: auto; } body { height:auto; overflow: auto; } .scrollable { position:inherit; } 

Остальное зависит от вашего конкретного случая.

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

Самый простой способ решить эту проблему против Android (а теперь и в ios7) – использовать фокусы ввода и размытие событий. Если вы не используете тег footer, просто замените его классом элемента footer.

В jQuery:

 $("input").focus(function(){ $('footer').hide(); }); $("input").blur(function(){ $('footer').show(); });