¿Cómo bloqueo o restrinjo los caracteres especiales de los campos de entrada con jquery?


Respuestas:


133

Un ejemplo simple que utiliza una expresión regular que puede cambiar para permitir / no permitir lo que quiera.

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

49
Esto no funciona para el texto pegado y también puede evitar que el usuario
presione

6
Esto no permitirá retroceso en Firefox
Alex

No funciona para palabras en español como: avión (avión), árbol (árbol), etc.
nikoskip

No funciona en el último navegador Firefox, pero funciona bien en Chrome
Phoenix

Esta solución me funciona en un elemento Bootstrap-TagsInput. Para solucionar el problema de pegar, simplemente puede agregar "pegar" a la lista de parámetros del evento así: $ ('entrada'). On ('presionar tecla, pegar' ', () => ........
Jim22150

60

Estaba buscando una respuesta que restringiera la entrada a solo caracteres alfanuméricos, pero que aún permitiera el uso de caracteres de control (por ejemplo, retroceso, eliminar, tabulación) y copiar + pegar. Ninguna de las respuestas proporcionadas que probé cumplía con todos estos requisitos, por lo que se me ocurrió lo siguiente usando el inputevento.

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

Editar:
como rinogo señaló en los comentarios, el fragmento de código anterior fuerza el cursor al final de la entrada cuando se escribe en el medio del texto de entrada. Creo que el siguiente fragmento de código 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);
});

1
+1 Estaba desplazándome por las respuestas buscando una respuesta como esta o enviaría mi propia respuesta. ¡Esta respuesta filtra instantáneamente cualquier carácter no permitido! ¡Excelente!
emilhem

2
+1 Funciona para texto pegado, no interfiere con las teclas de retroceso y eliminación de FF, y no depende de event.whicho event.keycode! ¡Ojalá pudiera +10!
rinogo

3
... PERO en Chrome e IE, cuando escribe nuevos caracteres o usa la tecla de retroceso y elimina las teclas en el medio del texto de entrada , el cursor se mueve al final del texto ...: / ¿Existe una solución fácil para ¿esta? ¡Tenía tantas ganas de que esto funcionara!
rinogo

Tan cerca ... este código tiene un comportamiento muy extraño en Chrome Mobile. El cursor salta en la primera letra escrita y también en el retroceso.
Juliano

2
@Juliano Interesante, parece que selectionStart siempre devuelve 0 en Chrome Mobile, independientemente de dónde esté colocado el cursor / cursor. No estoy seguro (todavía) si se trata de un error o comportamiento previsto. Actualmente estoy investigando el problema y actualizaré mi respuesta o comentario aquí cuando sepa más.
rexmac

48

Respuesta corta: evitar el evento de 'pulsación de tecla':

$("input").keypress(function(e){
    var charCode = !e.charCode ? e.which : e.charCode;

    if(/* Test for special character */ )
        e.preventDefault();
})

Respuesta larga: use un complemento como jquery.alphanum

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

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

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.


1
Cosas asombrosas, asombroso. Solo tuve que agregar una opción para habilitar / deshabilitar el carácter de barra inclinada ('/') ya que no funcionó mientras lo ponía en la allowconfiguración. Pero esa es la belleza de los complementos de jquery, el hecho de que puede modificarlos para adaptarlos a sus necesidades. ¡Gracias!
Adrian Marinica

Gracias Adrian. Por cierto, solo intenté habilitar la barra inclinada usando la allowopción y funcionó bien para mí usando este código: ¿ $('#firstName').alphanum({allow: "/"});Alguna posibilidad de que pueda proporcionar más información? Si hay un error o un problema con los documentos, sería bueno solucionarlo. Cheers
KevSheedy

Hola KevSheedy, gracias por tomarse el tiempo para probar esto. Lo siento, no lo dejé lo suficientemente claro. El problema era que yo también tenía allowOtherCharSets: falsey allowCaseless: false. Estos interferían con la configuración establecida allow. Desde mi punto de vista, creo que la allowopción debería vetar todas las demás opciones (como allowOtherCharSetso allowCaseless). Entonces, si especifica un carácter en la allowopción, debe permitirse independientemente de las otras opciones establecidas en el objeto de configuración. Lo mismo vale disallow. Pero esta es solo mi opinión. :) Saludos de nuevo! :)
Adrian Marinica

Buen punto Adrian. Seguí adelante y publiqué una solución en V1.0.6 para hacer allowy disallowtener una prioridad más alta. Está registrado en el número 7 . Espero que ayude
KevSheedy

6
"así que seguí adelante y escribí jquery.alphanum" ¡Impresionante!
Félix

14

¡Utilice el atributo de entrada de patrón de HTML5!

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

11
Si bien esta solución evita que se envíen caracteres no deseados, no evita que se ingresen caracteres no deseados en el campo de entrada.
rexmac

1
También existe el riesgo de que el usuario no esté utilizando un navegador HTML5.
Capitán Kenpachi

Según la experiencia de UX, una cosa que muchas personas odian más que tener restricciones en lo que pueden escribir es que te digan que lo hiciste mal después. - Forzar la entrada es para reducir los mensajes de error y las notificaciones no válidas.
julio de 2016

1
@Julix Es una cuestión de caso por caso. Hay algunos campos que solo pueden ser numéricos (precio o cualquier monto de moneda, etc.) donde no tiene sentido escuchar la entrada de caracteres alfabéticos. Pero sí, la mía no fue realmente una solución al problema de OP, sino una manera agradable y fácil de ayudar con el problema de UX.
keepitreal

13

Tu cuadro de texto:

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

Su javascript:

$("#name").keypress(function(event) {
    var character = String.fromCharCode(event.keyCode);
    return isValid(character);     
});

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

@Bhargav Rao, eliminé la otra publicación duplicada y volví a publicar esta porque esta era más apropiada, gracias por señalarlo
chandler

11

Utilice expresiones regulares para permitir / no permitir nada. Además, para una versión un poco más robusta que la respuesta aceptada, se pueden permitir caracteres que no tienen un valor clave asociado (retroceso, tabulación, teclas de flecha, eliminar, etc.) 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;
        }
});

11

Eche un vistazo al complemento 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'});

¿Hay uno para letras? Normalmente solo uso nan solo para números (como un código postal o un teléfono)

3

Escriba un código javascript en el evento onkeypress de 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;
}


1
Esto funciona si escribo manualmente. Pero puedo pegar caracteres especiales copiados.
Sunil Garg

3

Utilizo este código modificando otros que vi. Solo es grandioso para que el usuario escriba si la tecla presionada o el texto pegado 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
    }
})

¿por qué !e.charCode ? e.which : e.charCodey no simplemente e.charCode ? e.charCode : e.which?
Massimiliano Kraus

¿Qué cambios se deben realizar para la aceptación de números decimales?
ubm

2

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;

});
});

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


Creo que todos los códigos de teclas que no desea permitir pueden ser abrumadores de intentar y administrar.
RSolberg

Si desea restringir a alguien para que solo pueda ingresar números del 1 al 5, terminará administrando 5 códigos clave dentro de su código.
RSolberg

2
En realidad, no es un mal plan si AlphaNumeric no es el complemento para usted. Lo hice funcionar con una declaración switch / case. Este ejemplo no permite caracteres que no están permitidos en los nombres de directorio: $ ('input [type =' text '], textarea'). Keydown (function (ev) {switch (ev.keyCode) {case 47: case 92: case 63: caso 37: caso 42: caso 59: caso 124: caso 34: caso 60: caso 62: devolver falso;};});
M Miller

@ user434917, su código no funciona cuando lo pruebo con el navegador Chrome móvil de Android. tienes alguna solución para ello ..?
Pranesh Janarthanan

2
$(function(){
      $('input').keyup(function(){
        var input_val = $(this).val();
        var inputRGEX = /^[a-zA-Z0-9]*$/;
        var inputResult = inputRGEX.test(input_val);
          if(!(inputResult))
          {     
            this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
          }
       });
    });

1

Sí, puede 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";
    }
}
?>

Intenté 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)"/>

2
Amigo, has incluido un montón de código en exceso que probablemente no sea útil. ¿Puedes reducirlo al mínimo? Y estaba preguntando sobre jQuery, no estoy seguro de si PHP es relevante.
Simon East

@PHP Ferrari: Estoy usando código javascript, su código funciona bien, ¿cómo puedo mostrar un mensaje emergente de alerta si el cliente ingresa el carácter especial? El mensaje como "Caracteres especiales no permitidos".
Gema

1

solo los números:

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

o por tiempo incluido ":"

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

también incluye eliminar y retroceder:

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

Desafortunadamente, no lo hizo funcionar en un iMAC


1

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

Se puede agregar retroceso agregando \ b a la definición de expresiones regulares como esta: [a-zA-Z0-9 \ b]. O simplemente permite todo el rango latino, incluidos más o menos caracteres "no exóticos" (también controlan caracteres como retroceso): ^ [\ u0000- \ u024F \ u20AC] + $

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

Para manejar también la entrada ingresada a través de copiar y pegar, simplemente vincule también al evento "cambiar" y verifique la entrada allí también, eliminándola o eliminándola / dando un mensaje de error como "caracteres no admitidos".

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

1

Restrinja los 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 agregue 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 período, convertir texto en número y agregar redondeo de números 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;
}

...

1

Para reemplazar caracteres especiales, espaciar 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());
 }); 
});

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


    });]

4
Las respuestas de solo código no son demasiado útiles sin una explicación.
Vemonus

0

Permitir solo números en TextBox (restringir alfabetos y caracteres especiales)

        /*code: 48-57 Numbers
          8  - Backspace,
          35 - home key, 36 - End key
          37-40: Arrow keys, 46 - Delete key*/
        function restrictAlphabets(e){
            var x=e.which||e.keycode;
            if((x>=48 && x<=57) || x==8 ||
                (x>=35 && x<=40)|| x==46)
                return true;
            else
                return false;
        }

0
/**
     * Forbids special characters and decimals
     * Allows numbers only
     * */
    const numbersOnly = (evt) => {

        let charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode === 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        let inputResult = /^[0-9]*$/.test(evt.target.value);
        if (!inputResult) {
            evt.target.value = evt.target.value.replace(/[^a-z0-9\s]/gi, '');
        }

        return true;
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.