Come forzare il campo di input per inserire i numeri solo usando JavaScript?

Limitare l'utente ai solo valori di input numerici è estremamente importante, soprattutto quando si prende i dati su una forma. Esistono numerosi esempi in cui limitare l'utente per evitare qualsiasi input errata è importante come prendere il numero di telefono dell'utente o forse chiedere all'utente la sua età.

In HTML, il tag di input può essere impostato per prendere solo input numerici impostando il suo tipo proprietà al numero o a tel. Tuttavia, farlo tramite JavaScript sarà un po 'complicato.

Passaggio 1: il documento HTML

Crea un file HTML e in quel file, imposta un campo di input e un po 'di testo che indica all'utente di inserire i dati nel campo di testo con l'aiuto delle seguenti righe:

Inserisci i numeri qui

In queste righe:

• La proprietà OnKeyPress del tag di input è stata impostata sul valore di restituzione di numero di controllo() metodo
• La proprietà OnKeyPress viene eseguita in un evento specifico in corso e questo evento sembra essere una pressione di tasto, quindi passa l'evento all'interno del numero di controllo() anche metodo.

L'esecuzione della pagina Web HTML ora fornirà il seguente risultato sul browser:

Attualmente, tutti i tipi di caratteri possono essere scritti all'interno di questo campo di testo:

Ma questo cambierà nella prossima sezione.

Passaggio 2: imposta il codice JavaScript

Nel file JavaScript o nel tag, inizia creando la funzione denominata come numero di controllo():

funzione checknumber (event)
// Le prossime righe entrano qui

All'interno di questa funzione, la prima cosa è ottenere il codice ASCII del tasto Premere usando "evento" variabile:

var acode = evento.Quale ? evento.Quale: evento.chiave;

Successivamente, se il codice ASCII non è di numero, restituisci falso al campo di input altrimenti, restituisce true:

if (Acode> 31 && (Acode < 48 || aCode > 57)) restituire false;
restituire vero;

Lo snippet di codice completo sarà come:

funzione checknumber (event)
var acode = evento.Quale ? evento.Quale: evento.chiave;
if (Acode> 31 && (Acode < 48 || aCode > 57)) restituire false;
restituire vero;

Con ciò hai finito con la configurazione della porzione JavaScript.

Passaggio 3: testare il campo di input

Dopo aver finito con i passaggi 1 e il passaggio 2, esegui semplicemente il documento HTML e prova a mettere i valori all'interno del campo di input e osserva il suo comportamento:

Ora sta solo permettendo a numeri di essere scritto al suo interno e ignora altri carattere

Conclusione

Per limitare l'utente a inserire solo caratteri numerici all'interno di un input usando JavaScript. Quindi, in tal caso, chiamare una funzione su ogni tasto premuto all'interno di quel campo di input e all'interno di questa funzione, confronta il codice ASCII del tasto premuto contro i codici ASCII dei valori numerici. Sulla base di questo confronto, consentire l'inserimento delle chiavi all'interno del campo di input.