Подтвердить что ты не робот

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

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

header - логотип и т.д. - абсолютное расположение

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

Ответ 2

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

Здесь вы можете увидеть пример: http://jsbin.com/emumeb/24/quiet Код: http://jsbin.com/emumeb/24/edit p >

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

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

Вот пример 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%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

Ответ 3

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

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

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

Ответ 4

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

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

@media screen and (max-height: 300px) {

    #myinputtext{
        position: absolute; 
        top: 50px;

    }
}

Ответ 5

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

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

Ответ 6

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

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

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

});