0

Tengo este código que evita que los usuarios escriban letras dentro del input a excepción de la letra X y números.

$(document).ready(function() {
    $("#ejemplo").keypress(function(e) {
        var n = (e = e || window.event).keyCode || e.which,
            t = -1 != "0123456789xX".indexOf(String.fromCharCode(n));
        (t = 8 == n || n >= 35 && n <= 40 || 46 == n || t) || (e.returnValue = !1, e.preventDefault && e.preventDefault())
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ejemplo"></input>

Funciona bien, sin embargo no evita que dichas letras puedan ser pegadas desde el portapapeles. ¿Cómo lo soluciono?

1 respuesta 1

4

Actualización

Aplicando los cambios sugeridos en los comentarios por el OP y gracias al aporte de @Marcos la nueva solución pasaria a ser esta:

$("#ejemplo").on("input", function(e) {
  var valorInput = e.target.value;
  const globalRegex = new RegExp('^(?![1-2])[0-9x]*$', 'gi');
  if (!globalRegex.test(valorInput)) {
    alert('Cadena incorrecta! Vuelve a empezar: ' + valorInput);
    e.target.value = ''
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ejemplo">

Con esta nueva solución se solucionan dos problemas nuevos. A saber:

  1. El OP demandó que también funcionara el filtro para la introducción del texto a mano, no solo pegándolo.
  2. El OP demandó que no se permitiera la introducción de los números 1 y 2 al principio de la cadena.

La solución al punto 1 viene dada por el comentario de @Marcos, sugiriendo utilizar el evento input, el cual controla ambos casos, tanto la introducción manual de valores como el pegarlos. Por lo tanto ya no necesitamos controlar ni el keypress ni el paste.

La solución al punto 2 viene dada por este doble cambio en la expresión regular:

const globalRegex = new RegExp('^(?![1-2])[0-9x]*$', 'gi');

donde por un lado se ha modificado el patrón, y por el otro se ha incorporado i (también aporte de @Marcos) a las opciones para que la búsqueda sea case insensitive (no sensible a mayúsculas y minúsculas), reduciendo el patrón en un elemento que constaba en ambos casos, la x.

La nueva expresión regular, despiezada indica lo siguiente:

^              # inicio de la línea o cadena
   (?![1-2])   # un dígito que no empiece en el rango entre 1 y 2
   [0-9x]*     # n (*) caracteres comprendidos en el rango de 0 a 9 incluyendo la x 
$              # fin de línea

Anterior respuesta

Puedes usar el evento paste acompañado de una comprobación con expresión regular para permitir o no el pegado del texto. Si cumple la condición se pega, y sino aparece un mensaje de error y no se pega nada mediante el preventDefault() cancelando el evento.

$(document).ready(function() {
  $("#ejemplo").keypress(function(e) {
    var n = (e = e || window.event).keyCode || e.which,
      t = -1 != "0123456789xX".indexOf(String.fromCharCode(n));
    (t = 8 == n || n >= 35 && n <= 40 || 46 == n || t) || (e.returnValue = !1, e.preventDefault && e.preventDefault())
  })

  $("#ejemplo").on("paste", function(e) {
    var pastedData = e.originalEvent.clipboardData.getData('text');
    const globalRegex = new RegExp('^[0-9xX]*$', 'g');
    if (!globalRegex.test(pastedData)) {
      alert('Cadena incorrecta! ' + pastedData);
      e.preventDefault();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ejemplo">

15
  • Muchas graciaaaas! Me funcionó perfectamente Commented el 22 mar. 2022 a las 20:14
  • 1
    De nada :-) de todos modos siempre es recomendable hacer la comprobación en el backend cuando le lleguen los datos. A javascript se le puede engañar o deshabilitar y mejor que hagas una segunda comprobación después. Saludos!
    – masterguru
    Commented el 22 mar. 2022 a las 20:15
  • 2
    @masterguru, la respuesta es acertada, pero todavia se puede arrastrar texto al input. Te recomiendo revisar el evento input. Y ya que estamos, en la RegEx podes usar el flag i
    – Marcos
    Commented el 22 mar. 2022 a las 21:00
  • 1
    @NotoriusSha Ale, ya he hecho los cambios, espero que ya esteis todos contentos :-) Actualizad la página y repasad la respuesta de nuevo, gracias.
    – masterguru
    Commented el 22 mar. 2022 a las 21:51
  • 1
    @NotoriusSha así parece funcionar bien const globalRegex = new RegExp('^(?![0-2])(?![7-9])[0-9x\r?\n|]*$', 'gi');... la proxima duda abre una nueva pregunta porque nos estamos desviando mucho de la pregunta original, saludos!
    – masterguru
    Commented el 23 mar. 2022 a las 8:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.