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)?

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

Ответ 1

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

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

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

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

Ответ 2

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

В jQuery:

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

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