Prevent auf Tastaturanzeige iOS Scrollen 6

Question

ich in eine seltsame Frage leite. Ich produziere derzeit eine mobile Web-App, die nur HTML5 und CSS3 für iOS 6 verwendet.

Wenn jedoch ein input Element den Fokus erhält und die Softtastatur angezeigt wird, wird das Fenster gescrollt, so dass die Eingabe nicht durch die Tastatur verdeckt wird (auch wenn dies in keinem Fall der Fall ist).

Ich habe so lesen Sie weiter und über Google, dass man die folgenden hinzufügen, um dieses Verhalten zu verhindern (wenn dies in einem UIWebView sehen):

input.onfocus = function() { 
    window.scrollTo(0, 0); 
    document.body.scrollTop = 0; 
} 

Es scheint jedoch, dass in iOS 6, obwohl die Das Fenster wird zunächst zu 0,0 gescrollt, dann wird erneut gescrollt, um das fokussierte Element zu zentrieren. Ist noch jemand darüber gestolpert und kennt er eine Lösung für iOS 6?

Answer 1

Ich traf dieses Problem auch. Die folgenden Arbeiten auf iOS 6:

<input onfocus="this.style.webkitTransform = 'translate3d(0px,-10000px,0)'; webkitRequestAnimationFrame(function() { this.style.webkitTransform = ''; }.bind(this))"/> 

Grundsätzlich, da Safari entscheidet, ob die Seite auf der Textbox der vertikalen Position basierend zu blättern, können Sie es Trick durch momentane das Element über dem oberen Rand des Bildschirms bewegt dann zurück nachdem das Fokus-Ereignis abgeschlossen ist.

Der Nachteil ist, dass das Element für einen Bruchteil einer Sekunde verschwindet. Wenn Sie rund um die arbeiten wollen, können Sie dynamisch ein Klon des ursprünglichen Elements an der ursprünglichen Stelle einfügen und entfernen Sie sie dann in den webkitRequestAnimationFrame Rückruf.

Answer 2

Stellen Sie die Schriftgröße input auf 1em oder höher ein.

<input type=text style="font-size:1.2em">

Answer 3

Könnte es ein Timing-Problem sein?

Versuchen Sie es bis zu einem Timeout Verpackung, um sicherzustellen, dass es das Brennen ist, nachdem die einheimischen Ereignisse feuern.

input.onfocus = function() { 
    setTimeout(function() { 
     window.scrollTo(0, 0); 
     document.body.scrollTop = 0; 
    }, 50) 
} 

Answer 4

Update: Während die akzeptierte Lösung mit UIWebView arbeitete, ist das neuere schnellere WKWebView angekommen. Und wenn Sie die neueste Version von Cordova für iOS verwenden, können Sie WKWebView für iOS 9-Geräte aktivieren, aber standardmäßig wird die Ansicht weiterhin nach oben scrollen. Um dies zu beheben nur die Keyboard-Plugin hinzufügen (keine CSS-Hacks mehr benötigt):

hinzufügen Cordova Plugins im Terminal:

cordova platform add ios@4 
cordova plugin add cordova-plugin-wkwebview-engine --save 
cordova plugin add cordova-plugin-keyboard --save 

Sets iOS Präferenz verwenden WKWebView in Cordova config.xml

<platform name="ios"> 
    <feature name="CDVWKWebViewEngine"> 
     <param name="ios-package" value="CDVWKWebViewEngine" /> 
    </feature> 
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> 
</platform> 

Dann iOS Tastatureinstellungen in Cordova config.xml einfügen

<preference name="KeyboardShrinksView" value="true" /> 
    <preference name="DisallowOverscroll" value="true" /> 

Mo Weitere Einzelheiten zu den iOS-Einstellungen finden Sie in Cordova Dokumentation: https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html