web-dev-qa-db-fra.com

champ de saisie masqué lorsque le clavier logiciel apparaît dans phonegap

Création d'une application mobile à l'aide de Phonegap 3.6.3 pour Android et iOS. Le problème concerne uniquement Android, iOS agissant comme je le souhaite.

Lorsque je clique sur un champ de saisie ou sur une zone de texte, un clavier virtuel apparaît. Il couvre parfois ces éléments.

Les pages sont placées dans un iScroll, tout en bas, et dans un autre div absolu. Je ne peux donc pas y accéder une fois que l’écran s’affiche. Je suppose que je dois changer la vue Web pour qu'elle soit plus petite lorsque le clavier apparaît. Cependant, après avoir essayé beaucoup de choses, cela ne fonctionne pas.

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" />

(ont essayé de nombreuses valeurs différentes pour Android-windowSoftInputMode, comme dans l'exemple ci-dessous)

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

tête de page web 

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

(oui, j'ai essayé beaucoup d'autres choses aussi)

si vous pensez que tout ce qui vous intéresse est pertinent, faites-le moi savoir. Malheureusement, je ne suis pas libre de partager trop de code, mais si je comprends bien, c'est tout ce dont nous devons nous préoccuper.

Merci,

androidhtmlcsscordovaiscroll
5
Harry V

Supprimer cette ligne de config.xml

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

Et changez la ligne dans 'head of web page' en 

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

Moi aussi j'ai eu le même problème - il semble que le problème sous-jacent soit que vous ne puissiez pas éditer le fichier androidManifest avec cordova Build. Tout ce que vous pouvez faire est de modifier le fichier config.xml qui ne vous permet réellement que de modifier un sous-ensemble limité de paramètres. Ce que j'aimerais, c'est pouvoir changer la windowSoftInputMode.

J'ai trouvé une solution à mon problème. qui était le clavier apparaissant sur des champs en bas de l'écran qui, je pense, est le même problème que vous rencontrez. J'ai utilisé cordova 2.9.0 et cordova 3.6.0

Solution 1: La solution que j'ai trouvée consistait à modifier ce paramètre dans config.xml

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

Ce paramètre est défini sur "false" au lieu de "true" - la page défile maintenant pour révéler le champ que vous modifiez à l'ouverture du clavier. (pour être plus précis, je crois que la viewport change plutôt que de faire défiler vers le haut. J'espère que vous avez raison dans votre fenêtre de visualisation)

Solution 2: Essayez de supprimer ou de remplacer cette ligne de config.xml

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

comme 

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

au lieu. Cela fonctionne pour moi maintenant.

Solution 3: Essayez d'ajouter ce style à votre page

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

MODIFIER:

Si vous utilisez jQuery, vous pouvez essayer cela.

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

Ma solution utilisait Ionic keyboard plugin et implémentait ce code:

HTML:

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

CSS:

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

Javascript:

  • quand le clavier est ouvert

        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
});

  • quand le clavier est fermé

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

Pour offrir une meilleure expérience utilisateur, ajoutez ce code pour toutes les entrées.

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
Yonatan Alexis Quintero Rodrig

Esta funciona muy bien.

config.xml

plugin name = "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
Andres Henao

J'ai la solution la plus efficace pour faire défiler automatiquement les entrées et les rendre visibles. Vous devez d’abord ajouter le plugin clavier (plugin cordova add com.ionic.keyboard) comme mentionné par @Fedir. Ensuite, sur votre gestionnaire d'événements de l'événement 'keyboardshow', ajoutez le code suivant:

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

P.S: Ceci est pris en charge uniquement sur Android (Chrome) et Safari. :RÉ

1
Biswas Khayargoli

Une seule solution qui a fonctionné pour mon application en plein écran, c'est d'ajouter à l'application Cordova ionic-plugin-keyboard plugin

cordova plugin add com.ionic.keyboard

Code 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");
}

Après cela, vous pourrez ajuster la vue avec CSS.

ref .: https://stackoverflow.com/a/25823491/634275

0
Fedir RYKHTIK

Mon application utilise le mode plein écran/immersif Android. Je l'ai résolu en changeant les modes dès que le clavier apparaît/disparaît. 

J'ai installé les plugins cordova-plugin-fullscreen et ionic-plugin-keyboard et ajouté le code suivant:

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
Stéphane

J'utilise le Ionic Keyboard Plugin pour détecter l'ouverture du clavier et ajouter le remplissage nécessaire en conséquence au corps:

phonegap plugin add ionic-plugin-keyboard --save

Lorsque les événements se déclenchent, vous pouvez ajuster le padding-bottom sur le corps en fonction de la hauteur du clavier.

Ensuite, afin de détecter si l'élément sélectionné est visible, vous devez faire le calcul et faire défiler le conteneur si nécessaire. Le code final que j'utilise est le suivant:

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);
});

Le code utilise Framework7 et sa bibliothèque Dom7, très similaire à jQuery. Il suppose que l'élément scrollable est .page-content, mais vous pouvez l'ajuster en conséquence.

Vous devez laisser la préférence Android-windowSoftInputMode à sa valeur par défaut.

0
Andrea Lazzarotto