Sencha Touch 2.1: Panneau de formules Le clavier cache le Textfield actif sur Android

Lorsque je tape sur un champ de texte en bas de l'écran, le clavier apparaît et masque l'élément actif. Sur iOS, ça marche parfaitement.

Je peux faire défiler le formulaire, de sorte que le champ de texte se trouve dans la zone visible, mais ce n'est pas sympa du tout. Est-ce que je fais quelque chose de mal ou est-ce un bug connu car j'ai le même comportement dans cet exemple de Sencha Touch lui-même: docs.sencha.com/touch/2-1/touch-build/examples/forms/

  • Gradle ne peut pas résoudre les dépendances dans Android Studio
  • Attribuer une adresse IP statique au réseau Wifi sur Android 3.x et 4.x
  • Comment afficher AndroidManifest.xml à partir du fichier APK?
  • Erreur Genymotion: "Impossible de charger VirtualBox Engine" sur Yosemite. VirtualBox installé
  • Erreur de dépendance granulaire du service Play Service
  • Android openGL ES glDrawArrays ou glDrawElements?
  • Si sur ce formulaire:

    Entrez la description de l'image ici

    Je tape sur le champ de texte de "Bio", le clavier masque le champ de texte, au lieu de faire défiler le champ de texte pour qu'il soit visible lors de la saisie:

    Entrez la description de l'image ici

  • NoClassDefFoundError pour le code dans une bibliothèque Java sur Android
  • Format de fichier Android NinePatch .png?
  • Trouver tout sur la classe Uri d'Android - utilisation et but
  • Problème de jeton FCM dans un périphérique Android
  • Récupération d'une liste de classes d'un package dans un projet Android
  • Comment puis-je désactiver le surcroisement et le rebond dans une liste de lecture Android?
  • 5 Solutions collect form web for “Sencha Touch 2.1: Panneau de formules Le clavier cache le Textfield actif sur Android”

    C'est définitivement un problème connu, j'ai vu cela plusieurs fois sur Android. La seule chose que vous pouvez essayer de faire est d'écouter un événement de mise au point sur le champ de saisie, puis faites défiler jusqu'à l'élément. Vous devrez peut-être jouer avec la bonne valeur Y , ce qui correspond le mieux à votre situation.

     { xtype: 'textareafield', name: 'bio', label: 'Bio', maxRows: 10, listeners: { focus: function(comp, e, eopts) { var ost = comp.element.dom.offsetTop; this.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost); } } }, 

    Cela fonctionne pour moi. Si vous avez besoin d'aide pour l'implémenter, faites-le moi savoir!

    Entrez la description de l'image ici

    Solution moins intrusive:

    Sur la méthode de lancement d'application, ajoutez les lignes suivantes:

     launch: function() { if (Ext.os.is.Android) { //maybe target more specific android versions. Ext.Viewport.on('painted', function() { Ext.Viewport.setHeight(window.innerHeight); }); } // ... rest of the launch method here } 

    Cela fonctionne très bien sur de nombreux cas sur lesquels j'ai testé. Les implémentations Cordova et Chrome. Il suffit de prendre soin, dans le cas de l'application Cordova / Phonegap, que l'écran complet est défini sur false. (Testé sur Cordova 3.5)

    La solution «Ext.Viewport.on (« peint ») m'a donné un problème de défilement. Toute la page n'a pas pu être déroulée après le changement d'orientation, car la hauteur de la fenêtre serait alors supérieure à la hauteur de la fenêtre (Ext.Viewport.getHeight () Ne soit pas le même que Ext.Viewport.getWindowHeight () après le changement d'orientation.)

    Réalisé un travail autour de l'entrée inversée:

    Créer un fichier application / overrides / field / Input.js

     Ext.define('myApp.overrides.field.Input', { override: 'Ext.field.Input', initialize: function() { var me = this; // Solves problem that screen keyboard hides current textfield if (Ext.os.is.Android) { this.element.on({ scope : this, tap : 'onTap', }); } me.callParent(); }, onResize: function(input) { var me = input; //if input is not within window //defer so that resize is finished before scroll if(me.element.getY() + me.element.getHeight() > window.innerHeight) { Ext.Function.defer(function() { me.element.dom.scrollIntoView(false); }, 100); } }, // Solves problem that screen keyboard hides current textfield in eg MyTimeRowForm //old solution with Viewport.on('painted', gave scroll problem when changeing orientation onTap: function(e) { me = this; window.addEventListener( "resize", function resizeWindow () { me.onResize(me); window.removeEventListener( "resize", resizeWindow, true ); }, true ); }, }); 

    Et ajoutez-le à app.js

     requires: ['myApp.overrides.field.Input'] 

    Vous pouvez vous abonner aux événements show / hide d'un clavier et compenser le décalage de l'entrée. Il a été testé sur Android 4.2 et 4.4 (HTC One et Nexus 7).

     if (Ext.os.is.Android4 && Ext.os.version.getMinor() >= 2) { (function() { var inputEl = null; var onKeyboardShow = function() { setTimeout(function() { if (!inputEl) { return; } var currentClientHeight = window.document.body.clientHeight; var elRect = inputEl.getBoundingClientRect(); var elOffset = elRect.top + elRect.height; if (elOffset <= currentClientHeight) { return; } var offset = currentClientHeight - elOffset; setOffset(offset); }, 100); }; var onKeyboardHide = function() { setOffset(0); }; var setOffset = function(offset) { var el = Ext.Viewport.innerElement.dom.childNodes[0]; if (el) { el.style.setProperty('top', offset + 'px'); } }; document.addEventListener('deviceready', function() { document.addEventListener("hidekeyboard", onKeyboardHide, false); document.addEventListener("showkeyboard", onKeyboardShow, false); }, false); Ext.define('Ext.field.Input.override', { override: 'Ext.field.Input', onFocus: function(e){ inputEl = e.target; this.callParent(arguments); }, onBlur: function(e){ inputEl = null; this.callParent(arguments); } }) })(); } 

    Ça a mieux fonctionné pour moi

     { xtype: 'passwordfield', name: 'pass', listeners: { focus: function (comp, e, eopts) { var contr = this; setTimeout(function () { if (Ext.os.is('Android')) { var ost = comp.element.dom.offsetTop; contr.getParent().getParent().getScrollable().getScroller().scrollTo(0, ost, true); } }, 400); } } } 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.