2011-11-30 16 views
22

Sto creando un'applicazione HTML5 su un Android e per questo specifico scenario, abbiamo un campo di input che è per il codice di sicurezza di una carta di credito e vogliamo forzare il campo di input per essere solo numerico e mascherato.C'è un modo per avere un campo di input numerico mascherato?

Non ho avuto fortuna nel cercare questo caso specifico e da tutto quello che posso dire dalla ricerca/provarlo per me stesso è che questo non può essere fatto puramente tramite HTML5 (poiché il numero e la password sono entrambe opzioni per tipo e solo un tipo può essere usato). Mi manca qualcosa e c'è un modo per far apparire la tastiera numerica mentre l'input è mascherato tramite HTML5 o c'è un altro modo per forzare il tipo di input da tastiera o mascherare l'input tramite CSS o JavaScript?

Grazie per qualsiasi aiuto!

+0

Quando si dice "esclusivamente tramite HTML5" si intende veramente "senza JavaScript"? – robertc

+0

Preferibilmente vorrei utilizzare esclusivamente i parametri del campo di input; tuttavia sono aperto all'utilizzo di JavaScript. L'unica soluzione potenziale a cui posso pensare è l'impostazione predefinita del campo per digitare il numero e su un evento focus cambiare il tipo di password in JS. Non l'ho provato, quindi non sono sicuro di come lo gestirà Android. – JakeW

+0

@ user1074240, intendi come un campo numero pin? In tal caso, utilizzare un campo 'password', ma verificare che il valore sia numerico. – zzzzBov

risposta

35

Se è richiesto solo a lavorare nei browser WebKit base, e CSS è consentito in 'puramente attraverso HTML5', si potrebbe provare:

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

non sono sicuro se c'è attualmente alcun equivalente per gli altri browser , in futuro questo può essere controllato tramite appearance CSS property . La versione CSS3 di appearance è stata eliminata dalle specifiche, quindi sembra che dovrai attendere la standardizzazione di text-security per una soluzione cross-browser.

+0

Grazie per questo! funziona perfettamente per la mia situazione poiché abbiamo solo bisogno di funzionare su Android – JakeW

+2

Ovviamente funziona anche su una webview di iPhone (ad esempio PhoneGap). –

+0

Sono passati quasi 5 anni, ma non riesco ancora a trovare una soluzione migliore che funzioni in ogni browser. Quindi sembra che nulla sia stato standardizzato finora –