Входное текстовое поле скрыто за клавиатурой на Android-браузере Chrome

У меня есть мобильная веб-страница следующего формата:

Header – логотип и т. Д. – абсолютная позиция

Содержание – прокручиваемое, абсолютное позиционирование

Нижний колонтитул, абсолютная позиция 40 пикселей

Область содержимого имеет несколько ящиков ввода. В Chrome на Android нажатие на поле ввода внизу страницы приводит к тому, что вход не отображается, когда появляется мягкая клавиатура. На странице прокручивается, чтобы попытаться переместить окно вверх, но недостаточно, чтобы на самом деле было видно. Он заканчивается тем, что скрывается за нижним колонтитулом.

Любая идея, как это исправить? Это происходит только на Chrome-Android. Safari на iOS и IE на Windows Phone и других мобильных браузерах работает нормально.

Есть несколько способов решить эту проблему, наиболее очевидным решением является использование javascript для установки хэша на URL.

Вы можете увидеть пример этого: http://jsbin.com/emumeb/24/quiet Код: http://jsbin.com/emumeb/24/edit

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

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

Вот пример http://jsbin.com/emumeb/30/quiet Код: http://jsbin.com/emumeb/30/edit

Очевидно, что это то, что хром должен иметь с собой (аналогично UX iOS), поэтому я поднял ошибку в Chrome – https://code.google.com/p/chromium/issues/detail?id=270018&can= 4 & colspec = ID% 20Pri% 20M% 20Изменение% 20ReleaseBlock% 20Cr% 20Status% 20Owner% 20Summary% 20OS% 20Modified .

Я надеялся на решение только для CSS, но я не думаю, что он есть. Ответ Gaunt Face – хороший способ сделать это. К сожалению, в моем случае это потребует нескольких изменений и имеет возможность прерывать автоматизацию между прочим (так как URL добавляет к нему #targets).

Я решил это, изменив тип позиции в двух обработчиках щелчков.

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

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

Это имеет одно непреднамеренное следствие – положение прокрутки теряется. Я исправил это, получив смещение поля ввода и вызвав scrollTop в родительском div с этим смещением, тем самым восстановив позицию.

Я видел несколько вопросов об этом, но не нашел ответа. Я надеюсь, что это помогает кому-то.

Если вы используете jQuery, вы можете использовать следующие коды:

 $('body').on('focusin', 'input, textarea', function(event) { if(navigator.userAgent.indexOf('Android') > -1 && ...){ var scroll = $(this).offset(); window.scrollTo(0, scroll); } }); 

Хотя, ошибка должна быть решена сейчас.

Я нашел решение CSS, которое работает очень хорошо.

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

 @media screen and (max-height: 300px) { #myinputtext{ position: absolute; top: 50px; } } 

Переход от абсолютного позиционирования к фиксированному позиционированию должен решить проблему. Абсолютное положение элемента по отношению к начальному размеру страницы во время загрузки страницы (добавление клавиатуры сокращает видимую страницу). Исправлено положение элемента относительно текущего размера страницы, удерживая элемент выше клавиатуры.

 #myElement { position: fixed; bottom: 2em; } 

Для решения этой проблемы я использовал scrollIntoView.

$ (Document) .on ('focus', selector, function () {

document.querySelectorAll ( "селектор") scrollIntoView ().

});