Previene il movimento dell'interfaccia utente quando appare la tastiera

Question

Sto lavorando su una piccola app che utilizza Sencha Touch 2 per l'interfaccia utente. In questo momento lo sto eseguendo su Safari sul mio iPad e iPhone.

Il mio problema è che ogni volta che tocco un campo di testo, Safari apre la tastiera virtuale e spinge l'intera vista web verso l'alto, fuori dallo schermo.

Questo non sembra molto naturale, poiché la barra degli strumenti in alto non è più visibile.

Ecco due schermate che dimostrano il problema. Nella seconda schermata è possibile vedere l'effetto quando la tastiera è visibile.

C'è un modo per evitare questo comportamento e Safari ridimensionare l'interfaccia utente?

---

Answer 1

Sarà necessario chiamare il metodo blur() su textfield

// Assuming the id of textfield - "textFieldId" 
Ext.getCmp('textFieldId').blur(); 

Tenti a forcefully sfocatura input focus per il campo.

Answer 2

Se si utilizza html in elementi Sencha, è necessario rimuovere qualcosa tag html. Oppure puoi inserire il tag
nel codice html sorgente. Spero di aiutarti. :)

Answer 3

Purtroppo, Apple vuole questo comportamento, ma someone suggerito un piccolo hack utilizzando window.scrollTo():

listeners: { 
    focus: function() { 
     window.scrollTo(0,0); 
    } 
} 

Answer 4

ho trovato una soluzione che funziona per me. Sposta la barra superiore nel contenitore.

xtype: 'container', 
       docked: 'top', 
       height: '100%', 
       html: '', 
       itemId: 'MyContainer', 
       width: '100%', 
       items: [ 
        { 
         xtype: 'titlebar', 
         docked: 'top', 
         itemId: 'topBar', 
         title: 'Obec Webchat', 
         layout: { 
          type: 'hbox', 
          align: 'start' 
         }, 
         items: [ 
          { 
           xtype: 'button', 
           action: 'back', 
           id: 'BackButton', 
           itemId: 'BackButton', 
           margin: '5 70% 5 15', 
           ui: 'back', 
           text: 'Home' 
          } 
         ] 
        }, 
        { 
         xtype: 'container', 
         docked: 'bottom', 
         height: '95%', 
         html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>', 
         itemId: 'MyContainer1', 
         width: '100%' 
        } 
       ] 
      } 

Spero che questo aiuti.

Answer 5

Mettendo questo codice nella funzione di lancio nel app.js ha lavorato per me:

if (Ext.os.is.Android) { 
     Ext.Viewport.on('painted', function() { 
      Ext.Viewport.setHeight(window.innerHeight); 
     }); 
    } 

    if (Ext.os.is.iOS) { 

     Ext.Viewport.on('painted', function() { 
      Ext.Viewport.setHeight(window.innerHeight); 
     }); 
    }