2011-11-30 16 views
22

Tworzę aplikację HTML5 na Androida i dla tego konkretnego scenariusza mamy pole wejściowe dla kodu zabezpieczającego karty kredytowej i chcemy wymusić, aby pole wejściowe było tylko numeryczne i zamaskowane.Czy istnieje sposób na zamaskowane pole liczbowe?

Nie miałem szczęścia szukając tej konkretnej sprawy i ze wszystkiego, co mogę powiedzieć na podstawie badania/wypróbowania tego dla siebie, jest to, że nie można tego zrobić wyłącznie poprzez HTML5 (ponieważ numer i hasło są zarówno opcjami dla typu i można użyć tylko jednego typu). Czy czegoś brakuje i jest sposób na wyskakujące klawiatury numerycznej, podczas gdy wejście jest maskowane przez HTML5, czy istnieje inny sposób na wymuszenie typu wprowadzania klawiatury lub maskowanie danych wejściowych za pomocą CSS lub JavaScript?

Dzięki za pomoc!

+0

Kiedy mówisz "czysto przez HTML5", czy naprawdę masz na myśli "bez JavaScriptu"? – robertc

+0

Najlepiej chciałbym używać wyłącznie parametrów pola wejściowego; jednak jestem otwarty na używanie JavaScript. Jedyne potencjalne rozwiązanie, jakie mogę wymyślić, to domyślne pole do wpisania numeru, a na fokusie zmiana typu na hasło w JS. Nie testowałem tego, więc nie jestem pewien, jak poradzi sobie z tym Android. – JakeW

+0

@ user1074240, masz na myśli pole numeru PIN? Jeśli tak, użyj pola 'password', ale sprawdź, czy wartość musi mieć wartość numeryczną. – zzzzBov

Odpowiedz

35

Jeśli jest to wymagane do pracy tylko w przeglądarkach WebKit oparte, i CSS jest dozwolone „wyłącznie przez HTML5”, można spróbować:

input[type=number] { 
    -webkit-text-security: disc; 
} 

Nie jestem pewien, czy jest aktualnie jakikolwiek ekwiwalent dla innych przeglądarek , w przyszłości może to być kontrolowane przez appearance CSS property . Wersja CSS3 z appearance została usunięta ze specyfikacji, więc wygląda na to, że będziesz czekać na standaryzację text-security dla rozwiązania opartego na przeglądarce.

+0

Dzięki za to! działa świetnie w mojej sytuacji, ponieważ potrzebujemy go tylko do pracy z Androidem – JakeW

+2

Oczywiście działa również w przeglądarce internetowej iPhone'a (np. aplikacja PhoneGap) –

+0

Minęło już prawie 5 lat, ale wciąż nie mogę znaleźć lepszego rozwiązania, które mogłoby działać Wygląda na to, że nic nie zostało do tej pory zestandaryzowane? –