Телефонная клавиатура Android-клавиатура охватывает прокрутку элементов ввода, отключена

Ответ 1

В большинстве случаев в config.xml измените предпочтение полного экрана на false. это сделает трюк.

<preference name="fullscreen" value="false" />

Ответ 2

У меня есть наиболее эффективное решение для автоматического прокрутки ввода и его видимости. Сначала вам нужно добавить плагин ионной клавиатуры (работает над любым проектом cordova), потому что eventlistener "showkeyboard" теперь не работает.

cordova plugin add ionic-plugin-keyboard --save

Затем на вашем обработчике событий события "keyboardshow" добавьте следующий код:

window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
});

P.S: Это поддерживается только на Android (Chrome) и Safari.: D

Ответ 3

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

$("#textarea").focus(function(e) {
    var container = $('#container'),
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);

});

Когда клавиатура скрыта, объект textarea сохраняет фокус, поэтому, если он снова щелкнет, клавиатура покажет, и контейнеру необходимо прокрутить еще раз, чтобы показать вход

$("#textarea").click(function(e) {
    e.stopPropagation();
    var container = $('#container'), //container element to be scrolled, contains input
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);
});

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

Ответ 4

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

StatusBar.overlaysWebView(true);
StatusBar.hide();

которые находятся в моем контроллере, что вызывает эту неприятную проблему. И я использовал эти строки для проблем со статусом ios, теперь я взял их в состоянии if, и проблема исправлена.

if( device.platform=="iOS")
  {
   StatusBar.overlaysWebView(true);
   StatusBar.hide();
  }

Ответ 5

Я добавил прослушиватель событий для события клавиатуры и прокручивался на вход, только если он был выключен.

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

document.addEventListener('showkeyboard', onKeyboardShow, false);


 function onKeyboardShow(e) {        
    setTimeout(function() {
      e.target.activeElement.scrollIntoViewIfNeeded()
    }, 500) //needed timeout to wait for viewport to resize
  }

Чтобы запустить событие showkeyboard, мне нужно было иметь следующее в моем AndroidManifest.xml

  android:windowSoftInputMode="adjustResize"

Ответ 6

У меня была та же самая проблема, и это оказалось проблемой с использованием display: flex для контейнера входных данных. Изменение CSS так, чтобы контейнер не был основан на flexbox, решило проблему взаимодействия клавиатуры/ввода/прокрутки на Android для меня.

Ответ 7

Я использую плагин Cordion для ионной плагиновой клавиатуры и слушаю события native.keyboardshow и native.keyboardhide для изменения размера элемента контейнера HTML в моей форме:

    window.addEventListener('native.keyboardshow', function (e) {
        container.style.bottom = e.keyboardHeight + "px";
    });

    window.addEventListener('native.keyboardhide', function () {
        container.style.bottom = null;
    });

Это приводит к тому, что соответствующие поля ввода будут отображаться в виде (также при переходе назад и вперед между полями.

Ответ 8

Я понял проблему. У меня есть медиа-запрос в моем CSS, где размер некоторых элементов изменяется для меньшего размера экрана. Редактирование этого запроса устранило мою проблему.

Ответ 9

Если вы правильно сделали проект, как утверждает документация Кордовы, этого не произойдет.

Может быть, вы используете библиотеку прокрутки, такую ​​как iScroll?