elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] [Pregunta]: Input sólo letras con javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] [Pregunta]: Input sólo letras con javascript  (Leído 390 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 596



Ver Perfil
[Resuelto] [Pregunta]: Input sólo letras con javascript
« en: 27 Septiembre 2019, 14:15 »

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:
Código
  1.        var form_registry = document.getElementById('form_registry');
  2.  
  3.     form_registry.reg_name.addEventListener('keypress', function()
  4.     {
  5.     form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/^[a-zA-Z]+$/, '');
  6.     });
  7.  

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!...



« Última modificación: 29 Septiembre 2019, 03:28 por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.538



Ver Perfil WWW
Re: [Pregunta]: Input sólo letras con javascript
« Respuesta #1 en: 27 Septiembre 2019, 15:29 »

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

Código
  1. [^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á.

Código
  1. [^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.

Código
  1. [^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.

Código
  1. var form_registry = document.getElementById('form_registry');
  2.  
  3. form_registry.reg_name.addEventListener('keyup', function(e) {
  4.    form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-Z]+/g, '');
  5. });


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


Saludos


« Última modificación: 27 Septiembre 2019, 15:31 por #!drvy » En línea

MiguelCanellas


Desconectado Desconectado

Mensajes: 596



Ver Perfil
Re: [Pregunta]: Input sólo letras con javascript
« Respuesta #2 en: 27 Septiembre 2019, 15:47 »

¡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)
Código
  1. form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-ZñÑáéíóúÁÉÍÓÚ]+/g, '');
  2.  

Por si a alguien le sirve y quiere que le permita los espacios es
Código
  1. form_registry.reg_name.value = String(form_registry.reg_name.value).replace(/[^a-zA-ZñÑáéíóúÁÉÍÓÚ\s]+/g, '');
  2.  

¿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!
En línea

MinusFour
Colaborador
***
Desconectado Desconectado

Mensajes: 4.914


I'm fourth.


Ver Perfil WWW
Re: [Pregunta]: Input sólo letras con javascript
« Respuesta #3 en: 27 Septiembre 2019, 16:08 »

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.

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

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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines