Previene lo scorrimento sul display della tastiera iOS 6

Question

Sto riscontrando uno strano problema. Attualmente sto producendo un'app Web mobile utilizzando solo HTML5 e CSS3 per iOS 6.

Tuttavia, quando un elemento input riceve lo stato attivo e viene visualizzata la tastiera software, la finestra viene scorsa in modo che l'input non venga oscurato dalla tastiera (anche se non sarà in alcun caso).

Ho letto su SO e via Google che si può aggiungere quanto segue per impedire questo comportamento (durante la visualizzazione di questo all'interno di un UIWebView):

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

Tuttavia, sembra che in iOS 6, anche se il la finestra viene inizialmente spostata su 0,0, quindi viene nuovamente spostata per centrare l'elemento attivo. Qualcun altro ha trovato questo e sanno di una correzione per iOS 6?

Answer 1

Ho riscontrato anche questo problema. I seguenti lavori su iOS 6:

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

In sostanza, dal momento che Safari decide o meno di scorrere la pagina in base alla posizione verticale del testo, si può ingannare dal momentaneamente spostando l'elemento sopra la parte superiore dello schermo, quindi indietro di nuovo dopo che l'evento di messa a fuoco è stato completato.

Lo svantaggio è che l'elemento scompare per una frazione di secondo. Se vuoi ovviare a questo, puoi inserire dinamicamente un clone dell'elemento originale nella posizione originale e quindi rimuoverlo nel callback webkitRequestAnimationFrame.

Answer 2

Impostare lo stile del font di input su 1em o superiore.

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

Answer 3

Potrebbe essere un problema di temporizzazione?

Provare a chiuderlo in un timeout per assicurarsi che si accenda dopo che gli eventi nativi sono stati attivati.

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

Answer 4

Aggiornamento: Mentre la soluzione accettata funzionava con UIWebView, il nuovo WKWebView più veloce è arrivato da allora. E se stai utilizzando l'ultima versione di Cordova per iOS, puoi abilitare WKWebView per dispositivi iOS 9, ma per impostazione predefinita la vista continuerà a scorrere verso l'alto. Per risolvere questo problema è sufficiente aggiungere il plugin tastiera (senza hack CSS più necessari):

Aggiungi plugin Cordova all'interno del Terminal:

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

Set iOS preferenza da usare WKWebView in config.xml di Cordova

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

Poi inserire preferenze della tastiera iOS in config.xml di Cordova

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

Mo i dettagli sulle preferenze di iOS sono elencati su Cordova docs: https://cordova.apache.org/docs/en/5.4.0/guide/platforms/ios/config.html