Sencha Touch 2.1: Formulario El panel de teclado oculta Textfield activo en Android

Cuando toco un campo de texto en la parte inferior de la pantalla, aparece el teclado y oculto el elemento activo. En iOS, funciona perfecto.

Soy capaz de desplazar el formulario, por lo que el campo de texto está en el área visible, pero eso no es agradable en absoluto. ¿Estoy haciendo algo mal o es un error conocido, ya que tengo el mismo comportamiento en este ejemplo de Sencha Touch en sí mismo: docs.sencha.com/touch/2-1/touch-build/examples/forms/

Si en este formulario:

Introduzca aquí la descripción de la imagen

Toque en el campo de texto de "Bio", el teclado oculta el campo de texto, en lugar de desplazar el campo de texto hasta tenerlo visible al escribir:

Introduzca aquí la descripción de la imagen

5 Solutions collect form web for “Sencha Touch 2.1: Formulario El panel de teclado oculta Textfield activo en Android”

Esto es definitivamente un problema conocido, he visto esto muchas veces en Android. Lo único que puede intentar hacer es escuchar un evento de enfoque en el campo de entrada y luego desplazarse hasta el elemento. Es posible que tenga que jugar con el valor Y adecuado, que se adapte mejor a su situación.

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

Esto funciona para mí. Si necesita alguna ayuda para implementar esto, avíseme!

Introduzca aquí la descripción de la imagen

Solución menos intrusiva:

En el método de lanzamiento de la aplicación, añada las líneas siguientes:

 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 } 

Esto funciona muy bien en muchos casos en los que he estado probando. Implementaciones de Cordova y Chrome. Usted sólo tiene que tener cuidado, en el caso de Cordova / Phonegap aplicación, que la pantalla completa se establece en falso. (Probado en Córdoba 3.5)

La solución "Ext.Viewport.on ('painted'") me dio un problema de desplazamiento: no se podía desplazar toda la página después del cambio de orientación, ya que la altura de la ventana de visualización sería mayor que la altura de la ventana (Ext.Viewport.getHeight () No será el mismo que Ext.Viewport.getWindowHeight () después del cambio de orientación.)

Hizo un trabajo alrededor usando la entrada oculta:

Crear un archivo app / 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 ); }, }); 

Y agréguelo a app.js

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

Puedes suscribirte en eventos show / hide del teclado y compensar el offset de la entrada. Se ha probado en Android 4.2 y 4.4 (HTC One y 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); } }) })(); } 

Funcionó mejor para mí

 { 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); } } } 
  • Creación de una aplicación para Android con el constructor Sencha Touch 2
  • Teclado táctil Sencha siguiente botón en xtype textfield
  • PhoneGap 1.4 embalaje Sencha Touch 2.X - ¿Qué pasa con el rendimiento?
  • PhoneGap / Sencha Touch: Problema de procesamiento de WebView en ocultar SoftKeyboard
  • Rendimiento del androide Sencha Touch 2
  • Activar evento de clic en la etiqueta de enlace en JS para Android e iPhone
  • Sencha Touch 2 + PhoneGap + iPad: Video con datos codificados en base64: "No se pudo completar la operación"
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.