Jak mogę utworzyć znacznik HTML INPUT, aby zachować CSS, gdy koncentruje się na systemie Android 2.2+?

Question

Byłem zachwycony odkryciem, że Android 2.2 obsługuje pozycję: naprawiony selektor CSS. I został zbudowany prostą proof-of Concept, tutaj:

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

... który działa jak czar. Kiedy jednak próbuję dodać tag INPUT do mojego nagłówka, mam problem. Na samym początku każde urządzenie, które wypróbowałem do tej pory klonuje tag INPUT, nadaje mu nieskończony indeks Z i odświeża go na starym tagu. Klon jest w przybliżeniu we właściwej pozycji, ale większość jego macierzystego CSS (w tym, oczywiście, pozycja: fixed) jest ignorowana. Sklonowany znacznik INPUT ma nieprawidłowy rozmiar i kształt, a po przewinięciu treści strony przewija się i znika z ekranu.

Po wyjściu z ekranu następuje wesołość. Czasami urządzenie zmusi cofającą się część ciała do tyłu, tak aby sklonowany blank był z powrotem widoczny; czasami klawiatura znika, mimo że widoczne pole wydaje się być ostre; czasami klawiaturę nie można zwolnić, mimo że puste pole INPUT jest wyraźnie rozmyte. Oto przykład, można uruchomić na Android 2.2 urządzenie, aby zobaczyć, co się dzieje:

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

Styling wejściowe: ostrość nie zrobiła trick dla mnie jeszcze, ani nie mają wiele różnych prób brute-force do nasłuchiwania naciskiem() i blur() z JavaScriptem i rób to, co trzeba, z fokusem i klawiaturą.

Dziękuję bardzo za pomoc,

--Kent

Answer 1

To prawdopodobnie nie zostanie rozwiązany, dopóki Androida przełącza się za pomocą Chrome dla jego WebView. Obecna przeglądarka systemu Android tworzy Android TextView na górze strony, gdy pole wprowadzania HTML jest skupione. Wygląda na to, że nie układają się poprawnie ani nie układają. Możesz zobaczyć, że źle działa na stronach, które używają contentEditable.

Obecny interfejs Chrome na Androida implementuje interfejs WebKit IME, więc pola wejściowe są rysowane przez WebKit (i tracą niektóre z cech charakterystycznych Android TextView w ICS) i nie powinny mieć takich problemów.

Answer 2

Możesz być w stanie rozwiązać go za pomocą błąd w Androidzie: http://code.google.com/p/android/issues/detail?id=14295.

To znaczy, nie wyświetlaj pola wejściowego od razu. Zamiast tego wyświetl div elementu nakładkowego, który nasłuchuje i ukrywa się, wyświetla ukryte dane wejściowe i daje fokus wejściowy. W pewien sposób uniemożliwia to Androidowi użycie wierdowego wejścia, które jest umieszczone na szczycie wszystkiego, a zamiast tego używa pola wprowadzania przeglądarki, które można dowolnie kształtować.

Jak można zauważyć w RAPORT bug choć to nie działa z wejściem [type = „number”] ...

Answer 3

Rozwiązaniem jest dodanie:

 

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

w css.