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

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

Каждое решение, которое я пробовал, либо даст мне тот или иной, но не оба.

Решения, которые я пробовал:

  • Решение here. Добавление android: windowSoftInputMode = "adjustPan" и android: configChanges = "orientation | keyboardHidden" к основной активности в моем AndroidManifest.xml.
  • Вышеупомянутое решение с помощью "adjustResize" вместо "adjustPan".
  • Решение здесь. Добавление в файл confix.xml.

Использование параметра adjustPan сохраняет мои элементы одного размера, но отключает прокрутку. Использование adjustResize изменяет размер всей страницы, делая все миниатюрным. Сохраняя настройки по умолчанию, изменяется только оболочка, содержащая входные элементы, но прокрутка включена.

Мне удалось найти ту же самую проблему (без ответа) здесь. Они смогли "исправить" его, изменив размер своего приложения до 150% и прокрутив к закрытому элементу ввода, но, как они сказали, он не идеален.

Любая помощь приветствуется.

ОТВЕТЫ

Ответ 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?