Quiero restringir un texto de entrada a través de una expresión regular. En el primer ejemplo, uso el atributo onkeyup = "lettersOnly(this)" dentro del HTML, de la siguiente manera:
<form> <label for="username">Choose a Username:</label> <input type="text" name="username" id="username" onkeyup="lettersOnly(this)"> </form> <script> function lettersOnly(input){ var regex = /[^az]/gi; input.value = input.value.replace(regex, ""); } </script> Funciona, pero aprendí que esta es una mala práctica . Encontré otra solución evitando eso y configurando someVariable.onkeyup dentro de las etiquetas <script> . Sin embargo, mi objetivo es encontrar otra forma de obtener el mismo resultado usando addEventListener ('keyup', lettersOnly, false) . Investigué mucho para esta situación específica, pero no hay respuestas. ¿Es posible? Intenté lo siguiente:
<form> <label for="username">Choose a Username:</label> <input type="text" name="username" id="username"> <!--No more “onkeyup” attribute.--> </form> <script> function lettersOnly(input){ var regex = /[^az]/gi; input.value.addEventListener('keyup', lettersOnly(input){ input.value = input.value.replace(regex, ""); }, false) } </script>no funciona Mi intención es evitar el controlador de eventos en el html y usar en su lugar addEventListener. ¿Qué hay de malo en esta última codificación? ¿Por qué no funciona? Realmente apreciaré su paciencia.
En el código que dijiste que has probado; la función lettersOnly() nunca se llamará y addEventListener() nunca se llamará.
Simplemente puede cambiarlo de la siguiente manera:
<script> function lettersOnly(input){ var regex = /[^az]/gi; input.value = input.value.replace(regex, ""); } document.getElementById("username").addEventListener("keyup", lettersOnly(this), false); </script>Finalmente, encontré una solución y quiero compartirla.
<form> <label for="username">Choose a Username:</label> <input type="text" name="username" id="username"> <!--No more “onkeyup” attribute.--> </form> <script> let user = document.getElementById("username"); var regex = /[^az]/gi; user.addEventListener("keyup", ()=>{ user.value = user.value.replace(regex, ""); }) // The “user” variable has been just to simplify a lot of repeated coding, as it is equivalent to “document.getElementById(“username”). </script> No sé si esta es la mejor y óptima manera de resolver mi consulta, pero funciona. No hay "ONkeyup" en absoluto, sino que usa, en su lugar, addEventListener ("keyup", anonymous arrow function) . Realmente apreciaré si alguien tiene alguna otra sugerencia.
El principal problema con su segundo fragmento de código fue que en realidad no estaba adjuntando eventListener al elemento de entrada, ya que la función lettersOnly externas tampoco se llamó en ningún momento. Parece que resolvió esto en su propia respuesta, pero voy a ampliar mi comentario y sugeriré usar keydown en su lugar.
En el siguiente fragmento, cambié eventListener para adjuntarlo a keydown en lugar de keyup . Luego probamos si la nueva clave (a través event.key ) coincide con nuestra expresión regular con .match . Si la tecla presionada es un carácter que no es una letra, la coincidencia no será nula, por lo que queremos utilizar event.preventDefault() para interrumpir la adición de la nueva clave al valor de entrada.
Nota : esto tiene el beneficio adicional de no necesitar usar replace o replaceAll para eliminar el carácter no válido.
var regex = /[^az]/gi; function lettersOnly(event) { if (event.key.match(regex) !== null) { // Since it is an invalid character, we will prevent default event.preventDefault(); // Log the key to the console for demonstration console.log(event.key); // Not needed since we preventDefault() //event.target.value = event.target.value.replace(regex, ""); } } // `username` is equivalent to `document.getElementById("username") username.addEventListener("keydown", lettersOnly, false); <form> <label for="username">Choose a Username:</label> <input type="text" name="username" id="username"> </form>