come posso bloccare o limitare i caratteri speciali dai campi di input con jquery?

Come posso impedire che caratteri speciali vengano digitati in un campo di input con jquery?

Un semplice esempio che utilizza un’espressione regolare che è ansible modificare per consentire / non consentire ciò che si desidera.

$('input').on('keypress', function (event) { var regex = new RegExp("^[a-zA-Z0-9]+$"); var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); if (!regex.test(key)) { event.preventDefault(); return false; } }); 

Risposta breve: prevenire l’evento “keypress”:

 $("input").keypress(function(e){ var charCode = !e.charCode ? e.which : e.charCode; if(/* Test for special character */ ) e.preventDefault(); }) 

Risposta lunga: usa un plugin come jquery.alphanum

Ci sono diverse cose da considerare quando si sceglie una soluzione:

  • Testo incollato
  • I caratteri di controllo come backspace o F5 possono essere prevenuti dal codice precedente.
  • é, í, ä ecc
  • Arabo o cinese …
  • Compatibilità tra browser

Penso che quest’area sia abbastanza complessa da giustificare l’uso di un plugin di terze parti. Ho provato diversi plug-in disponibili, ma ho trovato alcuni problemi con ciascuno di essi, quindi sono andato avanti e ho scritto jquery.alphanum . Il codice si presenta così:

 $("input").alphanum(); 

O per un controllo più dettagliato, aggiungi alcune impostazioni:

 $("#username").alphanum({ allow : "€$£", disallow : "xyz", allowUpper : false }); 

Spero che sia d’aiuto.

Stavo cercando una risposta che limitasse l’input solo ai caratteri alfanumerici, ma che comunque permettessi l’uso di caratteri di controllo (ad esempio, backspace, delete, tab) e copia + incolla. Nessuna delle risposte fornite che ho provato ha soddisfatto tutti questi requisiti, quindi ho trovato quanto segue utilizzando l’evento di input .

 $('input').on('input', function() { $(this).val($(this).val().replace(/[^a-z0-9]/gi, '')); }); 

Modificare:
Come sottolineato da rinogo nei commenti, il frammento di codice sopra riportato obbliga il cursore alla fine dell’input durante la digitazione nel mezzo del testo di input. Credo che il frammento di codice qui sotto risolva questo problema.

 $('input').on('input', function() { var c = this.selectionStart, r = /[^a-z0-9]/gi, v = $(this).val(); if(r.test(v)) { $(this).val(v.replace(r, '')); c--; } this.setSelectionRange(c, c); }); 

Usa l’attributo di input del pattern di HTML5!

  

Dai un’occhiata al plug-in alfanumerico di jQuery. https://github.com/KevinSheedy/jquery.alphanum

 //All of these are from their demo page //only numbers and alpha characters $('.sample1').alphanumeric(); //only numeric $('.sample4').numeric(); //only numeric and the . $('.sample5').numeric({allow:"."}); //all alphanumeric except the . 1 and a $('.sample6').alphanumeric({ichars:'.1a'}); 

Usa regex per consentire / non consentire nulla. Inoltre, per una versione leggermente più robusta della risposta accettata, i personaggi che non hanno un valore chiave associato (backspace, tab, tasti freccia, cancella, ecc.) Possono essere fatti passando per la prima volta dall’evento keypress e controllare la chiave in base al codice chiave anziché al valore.

 $('#input').bind('keydown', function (event) { switch (event.keyCode) { case 8: // Backspace case 9: // Tab case 13: // Enter case 37: // Left case 38: // Up case 39: // Right case 40: // Down break; default: var regex = new RegExp("^[a-zA-Z0-9.,/ [email protected]()]+$"); var key = event.key; if (!regex.test(key)) { event.preventDefault(); return false; } break; } }); 

La tua casella di testo:

  

Il tuo javascript:

 $("#name").keypress(function(event) { var character = String.fromCharCode(event.keyCode); return isValid(character); }); function isValid(str) { return !/[~`[email protected]#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str); } 

Scrivi del codice javascript sull’evento onkeypress di textbox. come da requisito consentire e limitare il carattere nella tua casella di testo

 function isNumberKeyWithStar(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 42) return false; return true; } function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } function isNumberKeyForAmount(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) return false; return true; } 

Uso questo codice modificando gli altri che ho visto. Solo grande utente scrive se il testo premuto o incollato supera il test del pattern (match) (questo esempio è un input di testo che consente solo 8 cifre)

 $("input").on("keypress paste", function(e){ var c = this.selectionStart, v = $(this).val(); if (e.type == "keypress") var key = String.fromCharCode(!e.charCode ? e.which : e.charCode) else var key = e.originalEvent.clipboardData.getData('Text') var val = v.substr(0, c) + key + v.substr(c, v.length) if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) { e.preventDefault() return false } }) 

questo è un esempio che impedisce all’utente di digitare il carattere “a”

 $(function() { $('input:text').keydown(function(e) { if(e.keyCode==65) return false; }); }); 

codici chiave refrence qui:
http://www.expandinghead.net/keycode.html

Sì, puoi farlo usando jQuery come:

   

e lo script per il tuo user_availability.php sarà:

 <>,|=_+¬-]/', $user_name)){ echo "invalid"; }else{ $select = mysql_query("SELECT user_id FROM staff"); $i=0; //this varible contains the array of existing users while($fetch = mysql_fetch_array($select)){ $existing_users[$i] = $fetch['user_id']; $i++; } //checking weather user exists or not in $existing_users array if (in_array($user_name, $existing_users)) { //user name is not availble echo "no"; } else { //user name is available echo "yes"; } } ?> 

Ho provato ad aggiungere per / e \ ma non ci sono riuscito.


Puoi anche farlo usando javascript e il codice sarà:

     User id :  

solo i numeri:

$ (‘input.time’). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 57) {return true;} else {return false;}});

o per il tempo compreso “:”

$ (‘input.time’). keydown (function (e) {if (e.keyCode> = 48 && e.keyCode <= 58) {return true;} else {return false;}});

includendo anche delete e backspace:

$ (‘input.time’). keydown (function (e) {if ((e.keyCode> = 46 && e.keyCode <= 58) || e.keyCode == 8) {return true;} else {return falso;}});

sfortunatamente non riuscendo a farlo funzionare su un iMAC

Volevo commentare il commento di Alex alla risposta di Dale. Non è ansible (prima occorre quanto “rep”? Non succederà molto presto .. strano sistema.) Quindi come risposta:

Backspace può essere aggiunto aggiungendo \ b alla definizione regex come segue: [a-zA-Z0-9 \ b]. O semplicemente permetti l’intera gamma latina, includendo più o meno qualsiasi carattere “non esotico” (controlla anche caratteri come backspace): ^ [\ u0000- \ u024F \ u20AC] + $

Solo un vero carattere unicode al di fuori del latino c’è il simbolo dell’euro (20ac), aggiungi quello che potresti aver bisogno di altro.

Per gestire anche l’input immesso tramite copia e incolla, è sufficiente associare anche l’evento “change” e controllare anche l’input – eliminarlo o eliminarlo / dare un messaggio di errore come “caratteri non supportati” ..

 if (!regex.test($j(this).val())) { alert('your input contained not supported characters'); $j(this).val(''); return false; } 

Limita i caratteri speciali sul tasto di pressione. Ecco una pagina di test per i codici chiave: http://www.asquare.net/javascript/tests/KeyCode.html

 var specialChars = [62,33,36,64,35,37,94,38,42,40,41]; some_element.bind("keypress", function(event) { // prevent if in array if($.inArray(event.which,specialChars) != -1) { event.preventDefault(); } }); 

In Angular, avevo bisogno di un formato di valuta appropriato nel mio campo di testo. La mia soluzione:

 var angularApp = angular.module('Application', []); ... // new angular directive angularApp.directive('onlyNum', function() { return function( scope, element, attrs) { var specialChars = [62,33,36,64,35,37,94,38,42,40,41]; // prevent these special characters element.bind("keypress", function(event) { if($.inArray(event.which,specialChars) != -1) { prevent( scope, event, attrs) } }); var allowableKeys = [8,9,37,39,46,48,49,50,51,52,53,54,55,56 ,57,96,97,98,99,100,101,102,103,104,105,110,190]; element.bind("keydown", function(event) { if($.inArray(event.which,allowableKeys) == -1) { prevent( scope, event, attrs) } }); }; }) // scope.$apply makes angular aware of your changes function prevent( scope, event, attrs) { scope.$apply(function(){ scope.$eval(attrs.onlyNum); event.preventDefault(); }); event.preventDefault(); } 

Nel codice HTML aggiungi la direttiva

  

e nel regolatore angular corrispondente permetto solo che ci sia solo 1 punto, converti il ​​testo in numero e aggiunga l’arrotondamento del numero su ‘sfocatura’

 ... this.updateRequest = function() { amount = $scope.amount; if (amount != undefined) { document.getElementById('spcf').onkeypress = function (e) { // only allow one period in currency if (e.keyCode === 46 && this.value.split('.').length === 2) { return false; } } // Remove "." When Last Character and round the number on blur $("#amount").on("blur", function() { if (this.value.charAt(this.value.length-1) == ".") { this.value.replace(".",""); $("#amount").val(this.value); } var num = parseFloat(this.value); // check for 'NaN' if its safe continue if (!isNaN(num)) { var num = (Math.round(parseFloat(this.value) * 100) / 100).toFixed(2); $("#amount").val(num); } }); this.data.amountRequested = Math.round(parseFloat(amount) * 100) / 100; } ... 

Per sostituire caratteri speciali, spazio e convertire in lettere minuscole

 $(document).ready(function (){ $(document).on("keyup", "#Id", function () { $("#Id").val($("#Id").val().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '').toLowerCase()); }); }); 
 [User below code to restrict special character also $(h.txtAmount).keydown(function (event) { if (event.shiftKey) { event.preventDefault(); } if (event.keyCode == 46 || event.keyCode == 8) { } else { if (event.keyCode < 95) { if (event.keyCode < 48 || event.keyCode > 57) { event.preventDefault(); } } else { if (event.keyCode < 96 || event.keyCode > 105) { event.preventDefault(); } } } });]