2015-01-20 16 views
5

Desidero utilizzare il tipo di input numerico per il mio modulo HTML.Crea tipo di input HTML5 = "numero" che accetta trattini

Sfortunatamente accetta solo numeri reali, senza trattini.

C'è un modo per rendere il numero in ingresso che accetta numeri come "1234-123456789"?

+1

I valori per gli ingressi 'numerici 'devono sempre essere numeri in virgola mobile validi e quindi può contenere solo un trattino singolo (ovvero un segno meno) davanti al numero. Vedi http://www.w3.org/TR/html5/infrastructure.html#valid-floating-point-number – icke

risposta

4

È possibile utilizzare un'espressione regolare rispetto alla quale verrà convalidato il valore. Basta inserirlo nell'attributo pattern. È inoltre necessario modificare l'input type a text per poterlo utilizzare.

<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num" 
       title="The number input must start with a number and use either dash or a comma."/> 
+3

Già provato. Ma poi perdo la bella tastiera numerica sui dispositivi mobili. – alexwenzel

+0

@alexwenzel Aggiorna la tua domanda con il codice :) –

8

Recentemente ho avuto lo stesso problema. Mi sono aggirato usando type = "tel" invece di type = "text" o type = "number". Utilizzando 'tel' sono riuscito a ottenere una sola tastiera numerica su dispositivi mobili e sono ancora in grado di utilizzare my pattern = "[0-9 \ -] +".

Ecco il codice che ho usato. Spero che questo sia abbastanza buono per quello che ti serve. Hanno davvero bisogno di fare in modo che l'aggiunta di un attributo di pattern abbia la priorità su qualsiasi modello predefinito impostato dall'attributo type.

<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'> 

Naturalmente questo funziona solo se si è interessati trattini e possibilmente parentesi.

+2

Questo non causa problemi di accessibilità? Gli screen reader potranno dire alla gente di inserire un numero di telefono? – Carlin

+0

@ Carlin: buon punto. Questo molto bene potrebbe causare un problema con i lettori di schermo. In quanto tale, non è una soluzione perfetta, ma spetta allo sviluppatore decidere se è un sacrificio accettabile. – metamilo

+0

Grazie per questo, piccolo trucco intelligente. Una nota: anche questo sembra consentire '/', un altro carattere non consentito negli input numerici. Usando questo per ottenere gli input di data che usano il tastierino numerico mobile. –