Bewegung der Benutzeroberfläche verhindern, wenn die Tastatur erscheint

Question

Ich arbeite an einer kleinen App, die Sencha Touch 2 für die Benutzeroberfläche verwendet. Jetzt laufe ich es in Safari auf meinem iPad und iPhone.

Mein Problem ist, dass Safari jedes Mal, wenn ich auf ein Textfeld tippe, die virtuelle Tastatur aufruft und die gesamte Webansicht vom Bildschirm nach oben schiebt.

Dies sieht nicht sehr natürlich aus, da die obere Werkzeugleiste nicht mehr sichtbar ist.

Hier sind zwei Screenshots, die das Problem demonstrieren. Im zweiten Screenshot können Sie den Effekt sehen, wenn die Tastatur sichtbar ist.

Gibt es eine Möglichkeit, dieses Verhalten zu verhindern, und Safari Größe ändern die Benutzeroberfläche stattdessen?

---

Answer 1

Sie müssen die blur() Methode auf textfield

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

nennen

Versuche zu forcefully Unschärfe Eingabefokus für das Feld.

Answer 2

Wenn Sie diese HTML in Sencha Elemente verwenden müssen Sie etwas Tag HTML entfernen. Oder können Sie das Tag
in den Quell-HTML-Code setzen. Ich hoffe dir zu helfen. :)

Answer 3

Leider will Apple dieses Verhalten, aber someone schlug ein wenig Hack window.scrollTo():

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

Answer 4

ich eine Lösung gefunden haben, die für mich funktioniert. Sie bewegen die Topbar in den Container.

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%' 
        } 
       ] 
      } 

Hoffe, das hilft.

Answer 5

Setzen Sie diesen Code in Start-Funktion in app.js für mich gearbeitet:

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