Foro de elhacker.net

Buenos días,
anduve buscando sobre como podía hacer un input que sólo se pueda escribir texto y si se escribe un símbolo, o un numero (es decir algo que no sea letra) quisiera que al momento eliminara lo que está mal.

Hasta el momento tengo esto:

        var form_registry = document.getElementById('form_registry');
 
    	form_registry.reg_name.addEventListener('keypress', function()
    	{
    		form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/^[a-zA-Z]+$/, '');
    	});
 

aunque la expresión regular es incorrecta ya que se aplica cada vez que sólo hay letras (Una solución sería usar las expresiones regulares para detectar si hay sólo numeros o si hay solo simbolos o los dos aunque no estoy muy seguro sobre si hay más tipo de caracteres, numeros, letras, simbolos, ?, etcétera)

Gracias!...

https://regexr.com/

Esta página es super útil pues te explica como funciona un regex en concreto mientras te deja hacer pruebas en vivo. Tienes 3 errores, te explico:

Primero, usas el character class ^ fuera del grupo de caracteres que quieres dejar. Con eso, efectivamente estas invirtiendo la funcionalidad que quieres pues le estas diciendo: Reemplaza todo que desde el principio hasta el final tenga una o más (+) letras (a-zA-Z). En tu caso solo se cumpliría si el input tuviese únicamente letras de la A a la Z. Para solucionarlo, podemos meter usar el character class ^ dentro del "grupo" de caracteres. De esa forma le estaríamos diciendo que nos reemplace todo QUE NO SEAN letras  (a-zA-Z).

[^a-zA-Z]+$

Segundo, estas usando principio (^) y fin ($). Eso quiere decir que el el regex buscará que el texto sea valido de principio a fin y por tanto, en el momento en el que introduzcas un número, dejara de ser valido y no se aplicará.

[^a-zA-Z]+

Tercero, no estas usando el modificador global (/g). Si no lo usas, recogerá sólo la primera coincidencia para reemplazar y dejará el resto.

[^a-zA-Z]+/g

Bonus, estas usando keypress. keypress al igual que keydown son eventos que se ejecutan cuando la tecla es activada y por lo tanto no tienen en cuenta el nuevo valor añadido. Entonces, cuando yo pulse una tecla, aplicará ese reemplazo solo al valor anterior sin tener en cuenta la nueva tecla. Esto lo solucionas con keyup que se ejecuta una vez la tecla ha sido levantada y el valor actualizado.

var form_registry = document.getElementById('form_registry');
 
form_registry.reg_name.addEventListener('keyup', function(e) {
    form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-Z]+/g, '');
});

PD: Ten en cuenta, que A-Z no incluye a caracteres como Ñ Ç Á É Ö Ú Ó Í etc.


Saludos

¡Sos un genio!  :xD todo anda de 10!
como es un input que guardará un nombre podría decirse que si necesito que permita las ñ, o las í y ese tipo de caracteres.

Buscando encontré esto (hice una mezcla aplique lo que me dijiste y agregue los siguientes caracteres)

form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-ZñÑáéíóúÁÉÍÓÚ]+/g, '');
 

Por si a alguien le sirve y quiere que le permita los espacios es

form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+/g, '');
 

¿Esto que hice está bien?
El código ya lo probé y funciona muy bien, pero quería preguntar por si se me pasó algo...

¡Muchisimas gracias !drvy otra vez!

Yo usaría el evento de input en lugar de los eventos de teclado si quieres trabajarlo cuando los valores cambian. Si vas a usar keydown, simplemente cancela el evento así ni siquiera se llega a imprimir.

txtInput.addEventListener('keydown', function(e){
   if(!/[a-zA-Z]/.test(e.key)) e.preventDefault();
});

Sin embargo, el usuario todavía puede presionar otras teclas para copiar y pegar (y no estoy hablando solamente de Ctrl+V). Incluso, no es necesario que sea un evento de teclado, los sistemas operativos en general permiten copiar y pegar con menus contextuales (y no necesitas un mouse) o con algún botón del mouse (en linux puedo pegar presionando la rueda del mouse). Ningún evento de teclado te salva entonces porque el que lo hizo fue el mouse. Otra razón más para no usar eventos del teclado y usar los eventos de input o change.