Wie kann ich ein HTML-INPUT-Tag formatieren, so dass CSS beibehalten wird, wenn es auf Android 2.2+ ausgerichtet ist?

Question

Ich war erfreut zu entdecken, dass Android 2.2 den position: fixed CSS selector unterstützt. Ich habe eine einfache Proof-of-Konzept gebaut, hier:

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

..., die wie ein Zauber funktioniert. Wenn ich jedoch versuche, ein INPUT-Tag zu meinem Header hinzuzufügen, habe ich Probleme bekommen. Im Fokus klont jedes Gerät, das ich bisher ausprobiert habe, das INPUT-Tag, gibt ihm einen unendlichen Z-Index und überstreicht es über dem alten Tag. Der Klon befindet sich ungefähr in der richtigen Position, aber die meisten CSS-Elemente seiner Eltern (einschließlich natürlich: position: fixed) werden ignoriert. Das geklonte INPUT-Tag hat die falsche Größe und Form, und wenn ich den Textkörper der Seite scrolle, scrollt er nach oben und vom Bildschirm weg.

Sobald es aus dem Bildschirm ist, ergibt sich Heiterkeit. Manchmal zwingt das Gerät den scrollenden Teil des Körpers nach unten, so dass der geklonte Rohling wieder sichtbar ist. manchmal verschwindet die Tastatur, obwohl die sichtbare Box im Fokus zu bleiben scheint; manchmal kann die Tastatur nicht verworfen werden, obwohl das INPUT-Feld deutlich unscharf ist. Hier ist ein Beispiel, das Sie auf Ihrem Android-2.2-Gerät ausführen können, um zu sehen, was passiert:

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

Styling-Eingang: Fokus hat den Trick für mich noch nicht getan, noch hat viele verschiedenen Brute-Force-Versuche für Fokus zu hören() und blur() mit JavaScript und mach das Richtige mit Fokus und Tastatur.

Vielen Dank für Ihre Hilfe sehr,

--Kent

Answer 1

Dies wird wahrscheinlich nicht bis Android aufgelöst werden schaltet mit Chrome für seine Webansicht Der aktuelle Android-Browser erstellt ein Android TextView am oberen Rand der Seite, wenn ein HTML-Eingabefeld fokussiert ist. Anscheinend stylen oder positionieren sie es nicht richtig. Auf Seiten, die contentEditable verwenden, kann es falsch angezeigt werden.

Das aktuelle Chrome-für-Android implementiert die WebKit IME-Schnittstelle, so dass Eingabefelder von WebKit gezogen werden (und einige der Nettigkeiten des Android TextView auf ICS verlieren) und sollte solche Probleme nicht haben.

Answer 2

Sie könnte es zu lösen in der Lage durch einen Fehler in Android verwendet: http://code.google.com/p/android/issues/detail?id=14295.

Das bedeutet, dass das Eingabefeld nicht sofort angezeigt wird. Zeigen Sie stattdessen ein Overlay-div an, das auf Klick hört und sich versteckt und die verborgene Eingabe anzeigt und den Eingabefokus angibt. Dies verhindert irgendwie, dass Android die seltsame Eingabe verwendet, die über allem platziert wird, und verwendet stattdessen das Eingabefeld für den Browser, das Sie beliebig gestalten können.

Wie Sie aber in dem Bug raport beachten werden, das funktioniert nicht mit input [type = „Anzahl“] ...

Answer 3

Die Lösung ist hinzuzufügen:

 

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

in Ihrem CSS.