Android HTML5 - tastiera morbida si sovrappone al campo di immissione

Question

Sono un po 'stanco di cercare una soluzione per sovrapposizione del campo di input tramite tastiera virtuale su Android. Il mio problema è molto simile a questo: Soft Keyboard Overlapping with EditText Field anche se in questo caso si verifica in HTML5, non in un'applicazione nativa.

Più precisamente: quando il campo di immissione è completamente coperto da tastiera, viene fatta scorrere un'intera pagina e questo campo diventa visibile - questo è OK. Ma se questo input era sul bordo dell'area visibile (dopo che appare la tastiera), la mia tastiera virtuale si sovrappone e la pagina non scorrerà affatto. La pagina scorrerà subito dopo aver digitato un primo segno.

Il mio cliente non piace questo comportamento ... Essa si verifica di sicuro il Galaxy Tab da 10" - Android 4.0.3, Lenovo Tablet -. Android 3.1

Ho provato a fissare l'altezza di ingresso, utilizzando box-sizing:border-box;, -webkit-appearance: textfield;, -webkit-user-select: text;, -webkit-writing-mode: horizontal-tb;, -webkit-rtl-ordering: logical; e pochi di più, ma niente ha funzionato.

hai qualche idea? io preferirei soluzioni CSS, JavaScript scorrimento della pagina non è una risposta per me in questo caso (le esigenze del cliente).

Forse è ju st un bug del browser Web Android senza soluzioni temporanee o qualche problema specifico dovuto allo stile dei genitori di input (ho già provato a rimuovere tutte le proprietà position: absolute)?

Tutti i suggerimenti sono benvenuti.

Answer 1

Il modo più semplice per risolvere questo androide brutto (e ora anche in ios7) è utilizzare gli input focus e gli eventi sfocati. Se non stai usando il tag footer, sostituiscilo con la classe del tuo elemento footer.

In jQuery:

$("input").focus(function(){ 
    $('footer').hide(); 
}); 

$("input").blur(function(){ 
    $('footer').show(); 
}); 

Answer 2

ho avuto questo problema fastidioso, legato al mio quadro css - mobile-angolare-ui. Quindi è noto bug su internet, e ho passato ore a cercare la correzione sul web, ma sfortunatamente nessuna delle soluzioni proposte ha risolto il mio caso particolare. Finalmente ho fatto dei test, e ho scoperto che questo comportamento è causato dal framework che ho usato. (l'ho segnalato agli autori di u-mobile-angle, ma non ho ricevuto risposta). Probabilmente vorrai fare alcuni test, come ho fatto io, per scoprire se questo problema è legato all'architettura della tua app, veramente. Commenta tutto il codice CSS e inizia dalla pagina vuota, pura html con i moduli su di esso. Se tutto va bene (il modulo dovrebbe scorrere verso l'alto per mostrare in parte visibile della vista, sopra la tastiera morbida) quando il tuo css è commentato/spento, il tuo problema sta nel css, proprio come nel mio caso. Per coloro che utilizzano dispositivi mobili angolare-ui nelle loro applicazioni, e ottenere in questo problema, questo pezzo di codice ha fatto il lavoro per me:

html { 
    overflow: auto; 
} 
body { 
    height:auto; 
    overflow: auto; 
} 
.scrollable { 
    position:inherit; 
} 

Il resto dipende dal vostro caso particolare.

Spero che questo aiuti.