Input solo numeri in JavaScript
Questo articolo dimostrerà i metodi per inserire solo i numeri in JavaScript.
Come inserire solo i numeri in JavaScript?
È possibile inserire solo numeri in JavaScript optando per i seguenti approcci:
- "ASCII"Set di personaggi
- "jQuery"
I concetti menzionati saranno dimostrati uno per uno!
Metodo 1: input solo i numeri in JavaScript usando il set di caratteri ASCII
Questa procedura può essere utilizzata per applicare una condizione sulla rappresentazione ASCII dei numeri sul campo di input.
Esempio
Nel seguente esempio, includi il "ID"Deve essere inserito nel campo di input. Inoltre, specificare il campo di input come "testo"E invoca la funzione inputNumber () mentre supera l'evento come argomento quando"Onkeypress"L'evento viene attivato:
Successivamente, definisci una funzione chiamata "inputNumber ()"Che accetta"Num"Come argomento. Nella definizione della funzione, applicare la condizione sui numeri rappresentati in ASCII in modo tale che se il codice ASCII è maggiore di "31"E meno di"48" O "57", Significa che un carattere non numero viene inserito nel campo di input. In tal caso, verrà generato un avviso che chiede all'utente di inserire solo numeri:
funzione inputNumber (num)var asciicode = (num.Quale) ? Num.Quale: num.chiave
if (asciicode> 31 && (asciicode 57))
Avviso ("Immettere solo numeri")
Si può vedere che quando un carattere viene digitato nel campo di input, una casella di avviso è spuntata con le seguenti informazioni:
La tabella seguente spiega il concetto discusso di rappresentazione ASCII per i numeri secondo il requisito:
| Rappresentazione ASCII | Cifre |
|---|---|
| 48 | 0 |
| 49 | 1 |
| 50 | 2 |
| 51 | 3 |
| 52 | 4 |
| 53 | 5 |
| 54 | 6 |
| 55 | 7 |
| 56 | 8 |
| 57 | 9 |
L'unica limitazione al metodo di cui sopra è che accetta ancora l'input non numero dall'utente dopo aver visualizzato l'avvertimento. Per risolvere questo problema, controlla il metodo successivo!
Metodo 2: immettere solo i numeri in javascript usando jQuery
Questo approccio può essere implementato includendo la libreria "jQuery" e applicandolo sul campo di input con l'aiuto di un'espressione regolare per rilevare i valori non numerici e sostituirli con una stringa vuota.
Guarda il seguente esempio per comprendere il concetto dichiarato.
Esempio
Innanzitutto, includi la seguente libreria jQuery per applicare le sue funzionalità:
Successivamente, aggiungi un'intestazione usando ""Tag e campo di input usando il""Tag all'interno del tag centrale per allinearli al centro. Qui limiteremo la lunghezza del campo di input a "4" usando il "lunghezza massima"Attributo poiché è un pin a 4 cifre:
Immettere il pin a 4 cifre:
Ora, applica il "jQuery"Funzione sul campo di input con il"/[^0-9]/G" espressione regolare. Questo controllo di espressione regolare se il valore dei tipi non è in un carattere "^", quindi sostituirlo con un carattere vuoto:
$ (function ()$ ("input [name = 'numonly']").on ('input', function (e)
$ (questo).Val ($ (questo).Val ().sostituire (/[^0-9]/g, "));
);
);
In questo esempio, abbiamo limitato il campo di input per accettare solo carattere numerico a 4 cifre dall'utente:
Abbiamo implementato i metodi sul campo di input per immettere solo i numeri in JavaScript.
Conclusione
Per inserire solo i numeri in JavaScript, abbiamo implementato il "ASCII"Approccio set di personaggi e il"jQuery"Tecnica. L'approccio del set di caratteri ASCII può essere utilizzato per applicare una condizione al campo di input che controlla il carattere ASCII del carattere immesso. Considerando che la tecnica jQuery viene utilizzata insieme all'espressione regolare per applicare un controllo sul campo di input creato. Questo articolo ha dimostrato i metodi per inserire solo numeri in JavaScript.