Come posso personalizzare un tag HTML INPUT in modo che mantenga i CSS quando si concentra su Android 2.2+?

Question

Sono stato felice di scoprire che Android 2.2 supporta la posizione: selettore CSS fisso. Ho costruito un semplice proof-of concept, qui:

http://kentbrewster.com/android-scroller/scroller.html

... che funziona come un fascino. Quando tento di aggiungere un tag INPUT alla mia intestazione, tuttavia, ho problemi. A fuoco, ogni dispositivo che ho provato finora clona il tag INPUT, gli dà un Z-index infinito e lo rimpone sopra il vecchio tag. Il clone si trova approssimativamente nella giusta posizione, ma la maggior parte dei CSS dei suoi genitori (incluso, ovviamente, position: fixed) viene ignorata. Il tag INPUT clonato ha la dimensione e la forma sbagliate, e quando faccio scorrere il corpo della pagina, scorre su e giù dallo schermo.

Una volta fuori dallo schermo, ne consegue l'ilarità. A volte il dispositivo forza la parte di scorrimento del corpo verso il basso in modo che il bianco clonato ritorni in vista; a volte la tastiera va via anche se la scatola visibile sembra rimanere a fuoco; a volte la tastiera non può essere chiusa anche se il campo INPUT è chiaramente sfocato. Ecco un esempio è possibile eseguire sul proprio dispositivo Android 2.2 per vedere cosa sta succedendo:

http://kentbrewster.com/android-input-style-bug/

Styling ingresso: messa a fuoco non ha ancora fatto il trucco per me, né sono molti diversi tentativi forza bruta per l'ascolto di messa a fuoco() e sfocatura() con JavaScript e fare la cosa giusta con lo stato attivo e la tastiera.

Grazie mille per il vostro aiuto,

--Kent

Answer 1

Questo non sarà probabilmente risolto fino Android passa a utilizzare Chrome per la sua WebView. L'attuale browser Android crea un TextView Android nella parte superiore della pagina quando un campo di input HTML è focalizzato. Apparentemente non lo stile né lo posizionano correttamente. Puoi vederlo andare più male nelle pagine che usano contentEditable.

L'attuale Chrome-for-Android implementa l'interfaccia IME WebKit, quindi i campi di input sono disegnati da WebKit (e perdono alcune delle sottigliezze di TextView Android su ICS) e non dovrebbero avere problemi come questo.

Answer 2

Potreste essere in grado di risolverlo utilizzando un bug in Android: http://code.google.com/p/android/issues/detail?id=14295.

Cioè, non visualizzare il campo di immissione subito. Invece, mostra un div overlay che ascolta click e si nasconde e mostra l'input nascosto, e dà l'input focus. Ciò impedisce in qualche modo ad Android di utilizzare l'input wierd che viene posto sopra tutto, ed è invece utilizzando il campo di input del browser che puoi definire come vuoi.

Come si noterà nel raport bug, però, questo non funziona con l'input [type = "numero"] ...

Answer 3

La soluzione è quello di aggiungere:

 

    input { 
     -webkit-user-modify: read-write-plaintext-only; 
     -webkit-tap-highlight-color: rgba(255,255,255,0); 
    } 

nel CSS.