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

only numbers and letters javascript

Question

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

Answer 1

¡Usa el atributo de entrada de patrones de HTML5!

<input type="text" pattern="^[a-zA-Z0-9]+$" />

Answer 2

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

Puede llevar esto un paso más allá al agregar entradas enmascaradas ...

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

<input only-num type="text" maxlength="10" id="amount" placeholder="$XXXX.XX"
autocomplete="off" ng-model="vm.amount" ng-change="vm.updateRequest()">

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

Answer 8

Sí, puedes hacerlo usando jQuery como:

<script>
$(document).ready(function()
{
$("#username").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass(''messagebox'').text(''Checking...'').fadeIn("slow");
//check the username exists or not from ajax
$.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
{
if(data==''empty'') // if username is empty
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html(''Empty user id is not allowed'').addClass(''messageboxerror'').fadeTo(900,1);
});
}
else if(data==''invalid'') // if special characters used in username
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html(''Sorry, only letters (a-z), numbers (0-9), and periods (.) are allowed.'').addClass(''messageboxerror'').fadeTo(900,1);
});
}
else if(data==''no'') // if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html(''User id already exists'').addClass(''messageboxerror'').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html(''User id available to register'').addClass(''messageboxok'').fadeTo(900,1);
});
}
});
});
});
</script>
<input type="text" id="username" name="username"/><span id="msgbox" style="display:none"></span>

y el script para su user_availability.php será:

<?php
include''includes/config.php'';
//value got from the get method
$user_name = trim($_POST[''user_name'']);
if($user_name == ''''){
echo "empty";
}elseif(preg_match(''/[/'^£$%&*()}{@#~?><>,|=_+¬-]/'', $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á:

<!-- Check special characters in username start -->
<script language="javascript" type="text/javascript">
function check(e) {
var keynum
var keychar
var numcheck
// For Internet Explorer
if (window.event) {
keynum = e.keyCode;
}
// For Netscape/Firefox/Opera
else if (e.which) {
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
//List of special characters you want to restrict
if (keychar == "''" || keychar == "`" || keychar =="!" || keychar =="@" || keychar =="#" || keychar =="$" || keychar =="%" || keychar =="^" || keychar =="&" || keychar =="*" || keychar =="(" || keychar ==")" || keychar =="-" || keychar =="_" || keychar =="+" || keychar =="=" || keychar =="/" || keychar =="~" || keychar =="<" || keychar ==">" || keychar =="," || keychar ==";" || keychar ==":" || keychar =="|" || keychar =="?" || keychar =="{" || keychar =="}" || keychar =="[" || keychar =="]" || keychar =="¬" || keychar =="£" || keychar ==''"'' || keychar =="//") {
return false;
} else {
return true;
}
}
</script>
<!-- Check special characters in username end -->
<!-- in your form -->
User id : <input type="text" id="txtname" name="txtname" onkeypress="return check(event)"/>

Answer 9

Tu cuadro de texto:

<input type="text" id="name">

Tu javascript:

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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. jquery.alphanum 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.

Answer 16

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