{"id":1071,"date":"2012-03-22T00:01:54","date_gmt":"2012-03-21T23:01:54","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/?p=1071"},"modified":"2016-01-22T17:54:07","modified_gmt":"2016-01-22T16:54:07","slug":"javascript-jquery-impedire-di-digitare-determinati-caratteri-nellinput-controllo-in-tempo-reale","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/1071\/javascript-jquery-impedire-di-digitare-determinati-caratteri-nellinput-controllo-in-tempo-reale\/","title":{"rendered":"Javascript, Jquery – Impedire di digitare determinati caratteri nell’input (controllo in tempo reale)"},"content":{"rendered":"

All’interno di un form, in un campo di input o in una textarea, pu\u00f2 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\u00e9 l’utente sar\u00e0 stato costretto a inserirlo correttamente (per sicurezza, a ogni modo, io consiglio sempre un controllo alla ricezione… male non fa).<\/p>\n

In questo articolo vedremo un esempio su come limitare la digitazione dell’utente ai soli caratteri numerici<\/strong>. Potrete naturalmente modificarlo per adattarlo ai vostri scopi.
\nLo script da scaricare \u00e8 completamente funzionante cos\u00ec com’\u00e8. 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<\/code> da includere obbligatoriamente per il corretto funzionamento.
\nIl codice \u00e8 semplice e non richiede grandi spiegazioni. Diamo comunque un’occhiata alla sua struttura.<\/p>\n\n

Download script<\/h2>\n
\n
\"[JAVASCRIPT,<\/div>\n
Pagina diretta alla scheda e al download del codice<\/a><\/strong><\/div>\n <\/div>\n
<\/div>\n

Il form e la funzione di base<\/h2>\n

Nella sua forma base, troviamo questa funzione javascript da includere nella pagina:<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7<\/pre>\n<\/td>\n
\n
function<\/span> onlyNumeric(<\/span>evt)<\/span>{<\/span>\r\n   \/*Questa condizione ternaria \u00e8 necessaria per questioni di compatibilit\u00e0 tra browser se \"evt.which\" non viene preso, usa \"event.keyCode\" *\/<\/span>\r\n   var<\/span> charCode=<\/span>(<\/span>evt.which<\/span>)<\/span>?<\/span>evt.which<\/span>:<\/span>event.keyCode<\/span>;<\/span>\r\n   if<\/span>(<\/span>charCode><\/span>31<\/span> &&<\/span> (<\/span>charCode<<\/span>48<\/span> ||<\/span> charCode><\/span>57<\/span>)<\/span>)<\/span>\r\n      return<\/span> false<\/span>;<\/span>\r\n   return<\/span> true<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Il codice specifica che alla pressione di un qualsiasi tasto della tastiera sar\u00e0 evocata la funzione onlyNumeric()<\/code>. Il controllo del carattere digitato viene fatto considerando il suo valore nel codice ASCII<\/strong> (la tabella del codice ASCII potete trovarla facilmente con una ricerca su internet; a questo sito<\/a> trovate un esempio). Nel concreto, si prendono tutti i valori inferiori da 0 a 30 (tra cui troviamo il tasto di backspace<\/em>, senza il quale l’utente non potrebbe cancellare) e da 48 a 57 (le cifre numeriche).<\/p>\n
Il form non ha nulla di particolare, se non l’aggiunta nel campo di input dell’attributo onkeypress<\/code>: indica per l’appunto di avviare la funzione onlyNumeric()<\/code> alla pressione di un tasto della tastiera:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4<\/pre>\n<\/td>\n
\n
<form<\/span> method<\/span>=<\/span>\"post\"<\/span> action<\/span>=<\/span>\"\"<\/span> name<\/span>=<\/span>\"form_check\"<\/span>><\/span>\r\n\tInserisci un testo (qualsiasi carattere non numerico sar\u00e0 bloccato)<br<\/span> \/<\/span>><\/span>\r\n\t<input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"solo_numeri\"<\/span> value<\/span>=<\/span>\"\"<\/span> onkeypress<\/span>=<\/span>\"return onlyNumeric(event);\"<\/span>><\/span>\r\n<\/<\/span>form<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
L’uso del jquery come miglioramento<\/h2>\n
Grazie all’uso del JQuery, possiamo migliorare il codice precedente e applicare la funzione onlyNumeric()<\/code> esclusivamente a quegli input che presentano una determinata classe css<\/strong> (che nel nostro caso chiameremo onlyNumber<\/code>). Il vantaggio \u00e8 che non occorre l’aggiunta dell’attributo onkeypress<\/code> 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\u00f9 pulito e immediato.
\nEcco il codice modificato e il form relativo:<\/p>\n\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9<\/pre>\n<\/td>\n
\n
\/* In questo caso la funzione javascript si applica solo agli input con classe \"onlyNumber\" *\/<\/span>\r\njQuery(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\r\n\t$(<\/span>\".onlyNumber\"<\/span>)<\/span>.keypress<\/span>(<\/span>function<\/span>(<\/span>evt)<\/span> {<\/span>\r\n\t   var<\/span> charCode=<\/span>(<\/span>evt.which<\/span>)<\/span>?<\/span>evt.which<\/span>:<\/span>event.keyCode<\/span>;<\/span>\r\n\t   if<\/span> (<\/span>charCode><\/span>31<\/span> &&<\/span> (<\/span>charCode<<\/span>48<\/span> ||<\/span> charCode><\/span>57<\/span>)<\/span>)<\/span>\r\n\t\t  return<\/span> false<\/span>;<\/span>\r\n\t   return<\/span> true<\/span>;<\/span>\r\n\t}<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8<\/pre>\n<\/td>\n
\n
<form<\/span> method<\/span>=<\/span>\"post\"<\/span> action<\/span>=<\/span>\"\"<\/span> name<\/span>=<\/span>\"form_check\"<\/span>><\/span>\r\n\tInserisci un testo (qualsiasi carattere non numerico sar\u00e0 bloccato)<br<\/span> \/<\/span>><\/span>\r\n\t<input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"solo_numeri\"<\/span> value<\/span>=<\/span>\"\"<\/span> class<\/span>=<\/span>\"onlyNumber\"<\/span> \/<\/span>><\/span>\r\n\t<br<\/span> \/<\/span>><br<\/span> \/<\/span>><br<\/span> \/<\/span>><\/span>\r\n\r\n\tInserisci un testo (in questo caso sono validi anche caratteri, perch\u00e9 l'input non ha la classe \"onlyNumber\")<br<\/span> \/<\/span>><\/span>\r\n\t<input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"solo_numeri2\"<\/span> value<\/span>=<\/span>\"\"<\/span> \/<\/span>><\/span>\r\n<\/<\/span>form<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Uno script liberamente scaricabile che mostra come limitare l’inserimento dell’utente di numeri o stringhe in un input. Utile per il controllo di un form.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[80],"tags":[12,11,6],"class_list":["post-1071","post","type-post","status-publish","format-standard","hentry","category-javascript-e-derivati","tag-javascript","tag-jquery","tag-script","cat-80-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1071"}],"collection":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/comments?post=1071"}],"version-history":[{"count":13,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1071\/revisions"}],"predecessor-version":[{"id":2300,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1071\/revisions\/2300"}],"wp:attachment":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/media?parent=1071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/categories?post=1071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/tags?post=1071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}