Wie kann ich den style eines HTML-INPUT-tag, so dass es unterhält CSS, wenn konzentriert sich auf Android 2.2+?

Ich war erfreut zu entdecken, dass Android 2.2 unterstützt das "position:fixed" CSS-Selektor. Ich habe gebaut, ein einfacher proof-of-concept, hier:

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

... die funktioniert wie ein Charme. Wenn ich versuche, fügen Sie ein INPUT-tag auf meinem Kopf, aber ich schlug Schwierigkeiten. Im Fokus jedes Gerät ich habe versucht, so weit Klone INPUT-tag, gibt es eine unendliche Z-index, und Malt es auf den alt-tag. Der Klon ist in etwa in der richtigen position, aber die meisten von seinen Eltern, CSS (einschließlich, natürlich, die position:fixed) wird ignoriert. Die geklonten INPUT-tag ist die falsche Größe und Form, und wenn ich gehe, den Körper von der Seite, es blättert nach oben und aus dem Bildschirm.

Sobald es vom Bildschirm, Heiterkeit erfolgt. Manchmal ist das Gerät zu zwingen, den Bildlauf Teil des Körpers wieder nach unten, so dass der geklonte leer ist wieder in Sicht; manchmal ist die Tastatur geht Weg, obwohl das Feld "sichtbar" scheint im Fokus bleiben; manchmal ist die Tastatur kann nicht entlassen werden, auch wenn die EINGABE leer ist deutlich unschärfer. Hier ist ein Beispiel, Sie können auf Ihrem Android-2.2-Gerät, um zu sehen, was passiert:

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

Styling input:focus, hat zwar nicht den trick für mich, noch, noch haben viele verschiedene brute-force-versuche zu hören, für focus() und blur() mit JavaScript und das richtige zu tun mit der Konzentration und der Tastatur.

Vielen Dank für Eure Hilfe,

--Kent

  • über ein Jahr später und das Problem immer noch vorhanden ist... ich lief einfach in das problem heute und fand diese Diskussion.
  • Erstaunlich, dass dies noch nicht fest, auch in ICS.
InformationsquelleAutor Kent Brewster | 2010-10-11
  1. 13

    Dies wird wohl nicht aufgelöst werden, bis Android schaltet auf die Verwendung von Chrome für seine WebView. Die aktuelle Android-browser erstellt ein Android-TextView am oberen Rand der Seite, wenn ein HTML-Eingabefeld fokussiert wird. Anscheinend wollen Sie nicht, Stil oder positionieren Sie es richtig. Sie es sehen können mehr schief gehen auf Seiten mit contentEditable.

    Den aktuellen Chrome für Android setzt die WebKit-IME-Schnittstelle, so dass input-Felder sind gezeichnet von WebKit (und verlieren einige der Feinheiten der Android-TextView auf ICS) und sollten nicht über Fragen wie diese.

    • Zwei Jahre später, haben wir eine Erklärung für das, was falsch ist. Danke!!!
    InformationsquelleAutor Randall
  2. 9

    Die Lösung ist hinzuzufügen:

     
input { 
-webkit-user-modify: Lesen-schreiben-Klartext-nur; 
-webkit-tap-highlight-color: rgba(255,255,255,0); 
}

    in der css.

    • Das ist die Lösung, danke!
    InformationsquelleAutor Daniel Georgiev
  3. 1

    Könnten Sie in der Lage sein, um es zu lösen, indem mit einem bug in Android: http://code.google.com/p/android/issues/detail?id=14295.

    Ist, nicht angezeigt, das Eingabefeld sofort. Stattdessen zeigen ein overlay div die hört auf klicken Sie auf und versteckt sich und zeigt den versteckten Eingang, und geben Sie den Eingabefokus. Dies irgendwie verhindert, dass Android von der Nutzung der seltsame Eingang, der bekommt platziert oben auf alles, und wird stattdessen mit dem Browser Eingabefeldern können Sie Stil, wie Sie wollen.

    Als Sie sehen, dass in die bug-raport obwohl, das funktioniert nicht mit input[type="number"]...

    • Vielen Dank für die Zeiger Anders. Ich werde es akzeptieren, wenn nur, weil niemand sonst hat überhaupt nichts.
    InformationsquelleAutor Anders Ekdahl
Schreibe einen Kommentar