Поле ввода скрыто, когда в телефонной щели появляется программная клавиатура

Question

Поле ввода скрыто, когда в телефонной щели появляется программная клавиатура

Создание мобильного приложения с использованием Phonegap 3.6.3 для Android и iOS. Проблема только для Android, так как iOS работает так, как мне бы хотелось.

Когда я нажимаю на поле ввода текста или текстовое поле, появляется программная клавиатура. Это покрывает эти элементы иногда.

Страницы размещаются внутри iScroll, справа внизу, и еще одного абсолютного тега div, поэтому я не могу перейти к одному из них, как только появится экран. Я подозреваю, что я должен изменить веб-представление, чтобы быть меньше, когда клавиатура появляется. Однако, после многих попыток, это не работает.

config.xml

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="false" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="false" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="13" />
    <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="splash" />

(перепробовал много разных значений для android-windowSoftInputMode, как в примере ниже)

    <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" />

глава веб-страницы

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

(да, я тоже много чего пробовал)

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

Спасибо,

5

android html css cordova iscroll

Источник

user2283442 18 фев '15 в 04:27

9 ответов

Решение

У меня тоже была такая же проблема - похоже, основная проблема в том, что вы не можете редактировать файл androidManifest с помощью cordova Build. Все, что вы можете сделать, это отредактировать config.xml файл, который действительно позволяет вам изменять только ограниченный набор настроек. Я хотел бы иметь возможность изменить windowSoftInputMode,

Я нашел решение своей проблемы. это была клавиатура, появляющаяся над полями внизу экрана, что, по-моему, та же проблема, что и у вас. Я использовал Cordova 2.9.0 и Cordova 3.6.0

Решение 1. Я нашел решение изменить эту настройку в config.xml

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

Это происходит с этой настройкой, установленной на "ложь" вместо "истина" - страница теперь прокручивается вверх, чтобы показать поле, которое вы редактируете при открытии клавиатуры. (чтобы быть более точным, я считаю, viewport меняется, а не прокручивается вверх. Надеюсь, вы правы в своей части окна просмотра)

Решение 2. Попробуйте удалить или заменить эту строку из config.xml

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

как

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>

вместо. Это работает для меня сейчас.

Решение 3. Попробуйте добавить этот стиль на свою страницу

<style> <item name="android:windowTranslucentStatus">true</item></style>

РЕДАКТИРОВАТЬ:

Если вы используете jQuery Вы можете попробовать это.

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) {
    e.stopPropagation();
});

11

Источник

user2940675 18 фев '15 в 05:22

Мое решение было использовать плагин Ionic Keyboard и реализовать этот код:

HTML:

<div id="page" class="page-content">
    ...         
</div>

CSS:

.page-content {    
height: 100%;
overflow: auto;}

Javascript:

когда keyborad открыт

    window.addEventListener('native.keyboardshow', function (e) {
    var deviceHeight = window.innerHeight;
    var keyboardHeight = e.keyboardHeight;
    var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted
    deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number
    document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height
    document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height
});

когда клавиатура закрыта

    window.addEventListener('native.keyboardhide', function (e) {
    setTimeout(function () {
        document.getElementById('page').style.height = 100 + '%';//device  100% height
    }, 100);

Чтобы обеспечить лучший пользовательский опыт, добавьте этот код для всех входов

var inputs = document.querySelectorAll('input');//select all input
var n = inputs.length;
for (var i = 0; i < n; i++) {
    var input = inputs[i];
    input.addEventListener('focus', function (e) {//add event focus
        var inp = this; 
       //wait 0.6 seconds to scroll down to the input has focus
        setTimeout(function () {
            try {
                //if the keyboard is open
                if (cordova.plugins.Keyboard.isVisible) {
                    var padding = 15;
                    var targetPosition = parseInt($$(inp).offset().top + padding);
                    var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height   

                    //if the input is hidden by the keyboard,scroll to the input 
                    if (targetPosition >= keyboardHeight) {
                        padding *=5;
                        document.getElementById('page').scrollTop = targetPosition - padding;
                    }
                }
            } catch (ex) {
                alert(ex.message);
            }
        }, 600);
    }, true);

7

Источник

user4071287 17 апр '15 в 18:35

У меня есть наиболее эффективное решение для автоматической прокрутки ввода и сделать его видимым. Сначала вам нужно добавить плагин клавиатуры (плагин cordova add com.ionic.keyboard), как упомянуто @Fedir. Затем в ваш обработчик события 'keyboardshow' добавьте следующий код:

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

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

2

Источник

user3239405 14 дек '16 в 09:08

Esta funciona muy bien.

config.xml

имя плагина ="com.ionic-for-phonegap.keyboard" spec="0.0.1" source="pgb"

          window.addEventListener('native.hidekeyboard', keyboardHideHandler);
          window.addEventListener('native.showkeyboard', keyboardShowHandler);
          function keyboardHideHandler(e){
              alert('Goodnight, sweet prince');
          }
          function keyboardShowHandler(e){
              alert('Keyboard height is: ' + e.keyboardHeight);
          }

1

Источник

user4621106 09 июн '16 в 00:02

Единственное решение, которое работало для моего полноэкранного приложения, это добавление в приложение Cordova плагина ionic-plugin-keyboard

cordova plugin add com.ionic.keyboard

JS код:

// This event fires when the keyboard will hide
window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    $("body").addClass("keyboardOn");
}

// This event fires when the keyboard will show
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $("body").removeClass("keyboardOn");
}

После этого вы можете настроить вид с помощью CSS.

ссылка: /questions/47043167/cordova-34-obnaruzhenie-sobyitiya-klaviaturyi/47043215#47043215

0

Источник

user634275 18 сен '15 в 06:41

Я использую Ionic Keyboard Plugin, чтобы определить, когда клавиатура открыта, и добавить необходимые отступы к телу:

phonegap plugin add ionic-plugin-keyboard --save

Когда события происходят, вы можете настроить padding-bottom на корпусе, чтобы соответствовать высоте клавиатуры.

Затем, чтобы определить, является ли сфокусированный элемент видимым, вам нужно выполнить математику и прокрутить контейнер, если это необходимо. Последний код, который я использую, следующий:

cordova.plugins.Keyboard.disableScroll(true);
$$(window).on('native.keyboardshow', function(e) {
    $$('body').css('padding-bottom', e.keyboardHeight + 'px');

    var el = $$('input:focus, textarea:focus');
    var content = el.closest('.page-content');
    var offset = el.offset().top + content.scrollTop();
    /* 15 is an arbitrary value to add a bit of padding */
    var safeAreaHeight = el.outerHeight(true) + 15;
    var maxPosition = content.height() - safeAreaHeight;
    if (content.scrollTop() < (offset - maxPosition)) {
            content.scrollTop(offset - maxPosition);
    }

});
$$(window).on('native.keyboardhide', function(e) {
    $$('body').css('padding-bottom', 0);
});

Код использует Framework7 и его библиотеку Dom7, которая очень похожа на jQuery. Предполагается, что прокручиваемый элемент .page-content, но вы можете настроить его соответственно.

Вы должны покинуть android-windowSoftInputMode предпочтение по умолчанию.

0

Источник

user1101509 28 фев '17 в 14:25

Мое приложение использует полноэкранный режим / режим погружения Android. Я решил это путем переключения режимов, как только клавиатура появляется / исчезает.

Я установил плагины cordova-plugin-fullscreen и ionic-plugin-keyboard и добавил этот код:

document.addEventListener('deviceready', 
  function(){
    // disable immersive mode  on Android when keyboard is shown
        try {
      if (cordova.platformId == 'android') {
        AndroidFullScreen.immersiveMode(false, false);
        window.addEventListener('native.keyboardshow', function (e) {
          AndroidFullScreen.showSystemUI(false, false);

        });
        window.addEventListener('native.keyboardhide', function (e) {
          AndroidFullScreen.immersiveMode(false, false);
        });
      }
    } catch (error) {
      console.log('deviceready - ' + error);
    }
}, false);

0

Источник

user1974043 21 фев '17 в 11:53

Просто добавьте следующую строку в файл config.xml, вот и все.

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>

-1

Источник

user3894462 01 мар '18 в 06:40

Другие вопросы по тегам android html css cordova iscroll

user4008392 18 фев '15 в 04:47 2015-02-18 04:47 · Accepted Answer · 2015-02-18 04:47

Удалить эту строку из config.xml

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

И измените строку в заголовке веб-страницы на

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

4

Источник

user4008392 18 фев '15 в 04:47