Javascript, Jquery – Impedire di digitare determinati caratteri nell’input (controllo in tempo reale)

All’interno di un form, in un campo di input o in una textarea, può capitare di dover “obbligare” l’utente a inserire solo numeri o solo determinati caratteri. E’ utile, tra l’altro, come controllo preventivo: all’invio del form non dovremmo controllare se il valore corrisponde al nostro standard voluto, perché l’utente sarà stato costretto a inserirlo correttamente (per sicurezza, a ogni modo, io consiglio sempre un controllo alla ricezione… male non fa).

In questo articolo vedremo un esempio su come limitare la digitazione dell’utente ai soli caratteri numerici. Potrete naturalmente modificarlo per adattarlo ai vostri scopi.
Lo script da scaricare è completamente funzionante così com’è. All’interno troverete il codice in due versioni: in javascript puro e con l’aggiunta di una funzione jquery. Per quest’ultimo esempio troverete anche il file jquery.js da includere obbligatoriamente per il corretto funzionamento.
Il codice è semplice e non richiede grandi spiegazioni. Diamo comunque un’occhiata alla sua struttura.

Download script

Pagina diretta alla scheda e al download del codice

Il form e la funzione di base

Nella sua forma base, troviamo questa funzione javascript da includere nella pagina:

1
2
3
4
5
6
7

function onlyNumeric(evt){
   /*Questa condizione ternaria è necessaria per questioni di compatibilità tra browser se "evt.which" non viene preso, usa "event.keyCode" */
   var charCode=(evt.which)?evt.which:event.keyCode;
   if(charCode>31 && (charCode<48 || charCode>57))
      return false;
   return true;
}

Il codice specifica che alla pressione di un qualsiasi tasto della tastiera sarà evocata la funzione onlyNumeric(). Il controllo del carattere digitato viene fatto considerando il suo valore nel codice ASCII (la tabella del codice ASCII potete trovarla facilmente con una ricerca su internet; a questo sito trovate un esempio). Nel concreto, si prendono tutti i valori inferiori da 0 a 30 (tra cui troviamo il tasto di backspace, senza il quale l’utente non potrebbe cancellare) e da 48 a 57 (le cifre numeriche).

Il form non ha nulla di particolare, se non l’aggiunta nel campo di input dell’attributo onkeypress: indica per l’appunto di avviare la funzione onlyNumeric() alla pressione di un tasto della tastiera:

1
2
3
4

<form method="post" action="" name="form_check">
	Inserisci un testo (qualsiasi carattere non numerico sarà bloccato)<br />
	<input type="text" name="solo_numeri" value="" onkeypress="return onlyNumeric(event);">
</form>

L’uso del jquery come miglioramento

Grazie all’uso del JQuery, possiamo migliorare il codice precedente e applicare la funzione onlyNumeric() esclusivamente a quegli input che presentano una determinata classe css (che nel nostro caso chiameremo onlyNumber). Il vantaggio è che non occorre l’aggiunta dell’attributo onkeypress che abbiamo visto prima (soprattutto contando che, in genere, gli input vengono comunque formattati con delle classi). Inoltre, dal mio punto di vista, il codice risulta più pulito e immediato.
Ecco il codice modificato e il form relativo:

1
2
3
4
5
6
7
8
9

/* In questo caso la funzione javascript si applica solo agli input con classe "onlyNumber" */
jQuery(document).ready(function(){
	$(".onlyNumber").keypress(function(evt) {
	   var charCode=(evt.which)?evt.which:event.keyCode;
	   if (charCode>31 && (charCode<48 || charCode>57))
		  return false;
	   return true;
	});
});

1
2
3
4
5
6
7
8

<form method="post" action="" name="form_check">
	Inserisci un testo (qualsiasi carattere non numerico sarà bloccato)<br />
	<input type="text" name="solo_numeri" value="" class="onlyNumber" />
	<br /><br /><br />

	Inserisci un testo (in questo caso sono validi anche caratteri, perché l'input non ha la classe "onlyNumber")<br />
	<input type="text" name="solo_numeri2" value="" />
</form>