2012-07-02 17 views
21

Il codice seguente proviene da un modulo HTML. Se l'ingresso dovrebbe essere un numero intero, ho bisogno di cambiare il "tipo '?Tipo di input per modulo HTML per numero intero

<div class="friend2title"> 
    <label for="url">Add points:</label> 
</div> 
<div class="friend2field"> 
    <input name="state" type="text" id="state" maxlength="150"> 
</div> 
+0

Quali versioni del browser è necessario supportare? – Eric

risposta

20

Se stai usando HTML5, è necessario utilizzare il tipo di ingresso number. Se si sta utilizzando XHTML o HTML 4 , tipo di ingresso deve essere text

+0

E poi convalidare che in realtà * hai * un numero. Si. – uotonyh

+2

Ok ... come posso sapere se sto usando HTML 5? – John

+2

@John Si potrebbe semplicemente usare 'numero'; ovviamente fallirà la convalida di HTML 4 ma i browser HTML 4 lo tratteranno come tipo 'text'. – Neil

0

No, non è il tipo di dati di ingresso specifica il type of control to create:..

type = text | Radio | | inoltrare | reimpostare | file di password | casella | hidden | image | button [CI] Questo attributo specifica il tipo di contr ol per creare. Il valore predefinito per questo attributo è "testo".

3

Prima di HTML5, input type = "text" significa semplicemente un campo per inserire testo libero, indipendentemente da ciò che si vuole che sia. Questo è il compito di convalida che si dovrebbe fare in modo da garantire l'utente inserisce un numero valido

Se stai usando HTML5, è possibile utilizzare i nuovi tipi di input, uno dei quali è numero che convalida automaticamente l'input di testo e lo costringe a essere un numero

ma tieni presente che se stai costruendo un'app lato server (php per esempio) dovrai comunque convalidare l'input su quel lato (assicurati che è davvero un numero) dato che è piuttosto semplice hackerare il codice HTML e modificare il tipo di input, rimuovendo la convalida del browser

-4

Anche se si desidera accettare i numeri per l'input , Mi consiglia di utilizzare il tipo text.

<input type="text" name"some-number" /> 

Sul lato client eseguire alcune convalide jQuery per verificare che si tratti di un numero.

Quindi nel codice lato server, eseguire alcune convalide per verificare che sia in realtà un valore numerico.

19
<input type="number" step="1" ... 

Aggiungendo l'attributo step, di limitare ingresso interi.

Ovviamente si deve sempre convalidare anche sul server. Tranne che in condizioni attentamente controllate, tutto quanto ricevuto da un cliente deve essere trattato come sospetto.

+3

Si noti che questa risposta è valida solo per HTML5 –

+1

Questo non ti impedisce di inserire manualmente un float –

+1

@PetrPeller Potrebbe dipendere. Da [numero imput MDN] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values) 'Consentire valori decimali Un problema con gli input numerici è che il loro passaggio la dimensione è 1 per impostazione predefinita - se si tenta di immettere un numero con un decimale, ad esempio "1.0", verrà considerato non valido. Se si desidera immettere un valore che richiede decimali, è necessario riflettere questo valore nel passo (ad esempio, step = "0,01" per consentire i decimali a due cifre decimali). Ecco un semplice esempio: ' – PhoneixS

9

Questo potrebbe aiutare:

<input type="number" step="1" pattern="\d+" /> 

step è per convenienza (e potrebbe essere impostato su un altro intero), ma fa alcune pattern enforcing reale.

Si noti che dal pattern corrisponde all'intera espressione, non è stato necessario esprimerlo come ^\d+$.

Anche con questa espressione regolare esteriormente stretto, Chrome e le implementazioni di Firefox, è interessante notare che permettono di e qui (presumibilmente per la notazione scientifica), così come - per i numeri negativi, e Chrome permette anche per . mentre Firefox è più stretto nel rifiutare a meno che il . è seguito solo da 0. (Firefox contrassegna il campo come rosso sull'input che perde attenzione mentre Chrome non ti consente di immettere valori non consentiti.)

Poiché, come osservato da altri, è necessario sempre convalidare sul server (o sul anche client, se si utilizza il valore localmente sul client o si desidera impedire all'utente di andare al sistema con un roundtrip).

+0

Mentre Chrome non lo fa, in Firefox, l'aggiunta di' modello' garantisce che l'utilizzo di una parte frazionaria renda il campo contrassegnato come non valido. –

Problemi correlati