0

Ejemplo de codigo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="uno" class="demostracion">
    <input type="text" id="dos" class="demostracion">
    <input type="text" id="tre" class="prueba">
    <input type="text" id="cua" class="prueba">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- ATENCION AQUI -->
    <script>
        $(document).on('keyup', '.demostracion', function() {
            console.log($(this).attr('id'));
        });
    </script>
    <!-- ------------- -->

</body>

</html>

Ok, llevo investigando pero no doy con la respuesta. El console.log va a imprimirme los id de los input con la clase demostracion sobre los cuales se interactúen gracias al $(this).attr('id'), pero ¿Cómo haría para ahí también imprimir el id de los input que tienen la clase prueba?

3 respuestas 3

1

Si mal no entiendo, quieres incluir diferentes clases en el evento keyup. De ser así sólo es necesario separar con coma las clases que quieras incluir. Algo así...

...$(document).on('keyup', '.demostracion, .prueba', function() {...

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="uno" class="demostracion">
    <input type="text" id="dos" class="demostracion">
    <input type="text" id="tre" class="prueba">
    <input type="text" id="cua" class="prueba">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- ATENCION AQUI -->
    <script>
        $(document).on('keyup', '.demostracion, .prueba', function() {
            console.log($(this).attr('id'));
        });
    </script>
    <!-- ------------- -->

</body>

</html>

1

No lo sé, siento que te complicas de más. El evento de keyup es o debería de ser utilizado por elementos interactivos, en este caso son inputs, por lo que deberíamos enfocarnos en los inputs, no en las clases

document.addEventListener("DOMContentLoaded",()=>{
   const inputs = document.querySelectorAll("input[class]");

   inputs.forEach(e=> inputs[e]. addeventlistener ("keyup", evt=> {
      ....
   })
});
1
  • Es cierto, puede parecer complicado, pero el hecho es, que el código de arriba es solo un ejemplo sencillo que di para ver si alguien podía darme una respuesta para dar con la solución a mi problema original. Lo que planteas esta muy bien, pero no puedo hacerlo así ya que tengo muchísimos formularios e inputs y solo necesito que funcione con una pequeña cantidad de ellos, por eso los separe por clases... Muchas gracias por tu respuesta!
    – alentin
    Commented el 22 sept. 2021 a las 17:16
1

Hola pruebe lo soguiente

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="uno" class="demostracion">
    <input type="text" id="dos" class="demostracion">
    <input type="text" id="tre" class="prueba">
    <input type="text" id="cua" class="prueba">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- ATENCION AQUI -->
    <script>
        $(document).on('keyup', '.demostracion, .prueba', function() {
            console.log($(this).attr('id'));
        });
    </script>
    <!-- ------------- -->

</body>

</html>

5
  • Gracias por tu respuesta pero no soluciona mi problema al 100... De igual manera gracias
    – alentin
    Commented el 22 sept. 2021 a las 17:10
  • Que falta para solucionar el 100%, de esa forma obtienes los id de los elementos con la clase prueba que falta por resolver
    – rene
    Commented el 22 sept. 2021 a las 17:13
  • Bueno... No necesito que traiga un array con los ids de la clase cada que se ejecuta la función, me es preciso que traiga el id solo del input sobre el cual se esta interactuando... Como los que tienen el id uno y dos
    – alentin
    Commented el 22 sept. 2021 a las 17:22
  • ah ya entendía la pregunta, edito mi respuesta, es que entendí que necesitaba los id de la clase prueba, fue un mal entendido
    – rene
    Commented el 22 sept. 2021 a las 17:27
  • de todos modos ya @DjCrazy había dado la respuesta correcta
    – rene
    Commented el 22 sept. 2021 a las 17:29

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.