¿Cómo puedo bloquear o restringir los caracteres especiales de los campos de entrada con jquery?

¿Cómo locking los caracteres especiales para que no se tipeen en un campo de entrada con jquery?

Un ejemplo simple usando una expresión regular que puedes cambiar para permitir / no permitir lo que quieras.

$('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; } }); 

Respuesta corta: evitar el evento ‘keypress’:

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

Respuesta larga: utilice un complemento como jquery.alphanum

Hay varias cosas que considerar al elegir una solución:

  • Texto pegado
  • Los caracteres de control como el retroceso o F5 pueden evitarse con el código anterior.
  • é, í, ä etc
  • Árabe o chino …
  • Compatibilidad con el navegador cruzado

Creo que esta área es lo suficientemente compleja como para justificar el uso de un complemento de terceros. Probé varios de los complementos disponibles pero encontré algunos problemas con cada uno de ellos, así que seguí adelante y escribí jquery.alphanum . El código se ve así:

 $("input").alphanum(); 

O para un control más detallado, agregue algunas configuraciones:

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

Espero eso ayude.

Estaba buscando una respuesta que restringiera la entrada solo a caracteres alfanuméricos, pero aún así permitía el uso de caracteres de control (por ejemplo, retroceso, eliminación, tabulación) y copiar y pegar. Ninguna de las respuestas provistas que intenté cumplió con todos estos requisitos, así que se me ocurrió lo siguiente con el evento de input .

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

Editar:
Como señaló Rinogo en los comentarios, el fragmento de código anterior obliga al cursor al final de la entrada al escribir en el medio del texto de entrada. Creo que el fragmento de código a continuación resuelve este 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 el atributo de entrada de patrones de HTML5!

  

Eche un vistazo al plugin alfanumérico 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'}); 

Use expresiones regulares para permitir / rechazar cualquier cosa. Además, para una versión un poco más robusta que la respuesta aceptada, permitir que los caracteres que no tienen un valor de clave asociado (retroceso, tabulación, teclas de flecha, eliminar, etc.) se puedan hacer pasando primero por el evento de pulsación de tecla y compruebe la clave según el código clave en lugar del valor.

 $('#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.,/ $@()]+$"); var key = event.key; if (!regex.test(key)) { event.preventDefault(); return false; } break; } }); 

Tu cuadro de texto:

  

Tu javascript:

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

Escriba algún código de javascript en onkeypress event of textbox. según el requisito permita y restrinja el carácter en su cuadro de texto

 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 este código modificando otros que vi. Solo grandioso para el usuario escribir si la tecla presionada o pegada pasa la prueba de patrón (coincidencia) (este ejemplo es una entrada de texto que solo permite 8 dígitos)

 $("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 } }) 

este es un ejemplo que evita que el usuario escriba el carácter “a”

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

los códigos de clave se refieren aquí:
http://www.expandinghead.net/keycode.html

Sí, puedes hacerlo usando jQuery como:

   

y el script para su user_availability.php será:

 <>,|=_+¬-]/', $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"; } } ?> 

Traté de agregar para / y \ pero no tuve éxito.


También puede hacerlo usando javascript y el código será:

     User id :  

solo los números:

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

o por tiempo incluyendo “:”

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

también incluye eliminar y retroceder:

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

desafortunadamente no conseguir que funcione en un iMAC

Quería comentar sobre el comentario de Alex a la respuesta de Dale. No es posible (primero, ¿cuánto “representante”? Eso no sucederá muy pronto … sistema extraño.) Entonces como respuesta:

Se puede agregar un retroceso agregando \ b a la definición de expresiones regulares como esta: [a-zA-Z0-9 \ b]. O simplemente permite todo el rango latino, incluyendo más o menos cualquier carácter “no exótico” (también controla los caracteres como retroceso): ^ [\ u0000- \ u024F \ u20AC] + $

Solo el carácter unicode real fuera del latín es el símbolo del euro (20ac), agregue lo que necesite.

Para manejar también la entrada ingresada a través de copiar y pegar, simplemente también se une al evento de “cambio” y también verifica la entrada allí – eliminándolo o desglosándolo / dando un mensaje de error como “caracteres no compatibles”.

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

Restringir caracteres especiales al presionar teclas. Aquí hay una página de prueba para códigos clave: 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(); } }); 

En Angular, necesitaba un formato de moneda adecuado en mi campo de texto. Mi solución:

 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(); } 

En el html agrega la directiva

  

y en el controlador angular correspondiente, solo permito que haya solo 1 punto, convierta texto en número y agregue el redondeo numérico en ‘desenfoque’

 ... 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; } ... 

Para reemplazar caracteres especiales, espacio y convertir a minúsculas

 $(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(); } } } });] 
    Intereting Posts