Home / Questions / 333597
Accepted
Fernando Iam
Asked: 2020-03-02 13:24:28 +0800 CST 2020-03-02 13:24:28 +0800 CST

add event with addevenlistener

  • 772

I want to add some events to some input['text'], I would like to make it clean and add them from javascript . But I can't get them to work, how should I do it? This is how I tried to make it work

function soloNumeros(e){
    var key = window.Event ? e.which : e.keyCode
    return (key >= 48 && key <= 57)
}
var prueba = form.querySelectorAll('input[type=text]')[4];
prueba.addEventListener('keypress', soloNumeros(e));
```
javascript

2 Answers

  1. Best Answer

    If you want to cancel the default behavior of a key, just assign a range in the event where it is not clickable:

    function soloNumeros(e){
    var key = e.keyCode;

    if(!(key >= 48 && key <= 57)){
        e.preventDefault();
    }    

    return (key >= 48 && key <= 57)
}
    • 2

  2. I think you can proceed like this:

    • You get all the elements with querySelectorAll()by the assigned class
    • You loop through the variable that contains the previously retrieved elements
    • For each element obtained in the iterations, you assign the event ofkeyup
    • You can validate through a regex where you indicate that they are only numbers like this[0-9]
    • Considering that the regex will validate and return trueor false, as the case may be, validate with aif else

    Example

        <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
      <h1>Solo números</h1>
    <input type="text" class="soloElementos">
    <input type="text" class="soloElementos">
    <input type="text" class="soloElementos">
    <input type="text" class="soloElementos">
    <script>
        let soloNumeros = document.querySelectorAll(".soloElementos")
        
        soloNumeros.forEach((elemento) => {
          elemento.addEventListener("keyup", () => {
            let testeo = /[0-9]/.test(elemento.value)
            if (testeo) {
              console.log("Bien todo es número")
            } else {
              console.log("Hiciste algo mal")
            }
          })
        })
    </script>
    </body>
    </html>

    • 0