0

Tengo varios input en mi html, pero hay uno donde dependiendo de algunos select cambia el valor de este input deshabilitado, hay algún evento que pueda detectar este cambio?

2
  • 2
    addEventListener('change', ....) o en jquery sería .change
    – masterguru
    el 27 ene. 2022 a las 21:08
  • Amigo dejanos ver tu codigo, si lo vemos en logica deberias capturar el evento con .change y despues capturar el valor de ese input para pasarlo por un switch y asi saber que accion realizar correspondiente a el valor del input.(Dejanos ver tu codigo)
    – Mateo Guio
    el 27 ene. 2022 a las 21:26

2 respuestas 2

2

Los eventos detectan interacciones del usuario sobre elementos de la página: clic de ratón, pulsación de teclas, selección de un elemento, etc. Como tu estas modificando programáticamente el valor de cierto elemento cuando se produce un evento en uno o varios selectores, ese cambio en si no puede ser asociado a ningún evento del propio elemento. Un onchange por ejemplo no va a detectar el cambio.


Tienes dos opciones:

La primera, usar una función para modificar el valor de ese input y asociarla a los cambios de los selectores, no estas detectando el cambio en si del valor del input, pero puedes ejecutar un script adicional cada vez que modificas su valor.

La segunda opción es usar un mutator observer para observar cambios en el valor del input. Es como tener un evento que detecte un cambio que se produce en un elemento de forma programática, es decir es algún elemento del programa, no necesariamente una acción directa del usuario el que desencadena algún cambio en un elemento (su valor, atributos, etc.).

Hay diferentes mutators que permiten gestionar diferentes cambios, para un cambio de valor de un elemento hay una respuesta en SO en inglés sobre el tema que me sirvió en su día: https://stackoverflow.com/a/61975440/3919660 Usaré su código para mi ejemplo. Lo que voy a hacer es poner un input y un botón, al clicar el botón, evento que recojo de la forma "tradicional" modificaré el valor del input, esta modificación es la que detecta el mutator.

<!DOCTYPE html>
<html lang="en">
<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>
    <button type="button">+ 10</button>
    <input type="number" value="0">

    <script>
        const input = document.querySelector('input');

        // Modificar el valor del input cada vez que se acciona el botón
        document.querySelector('button').addEventListener('click', function () // void
        {
            input.value = parseInt(input.value) + 10;
        });

        // Detectar cambios de valor en el input mediante un mutator
        observeElement(input, "value", function (oldValue, newValue) {
            console.log("Input value changed via API. Value changed from '%s' to '%s'", oldValue, newValue);
        });

        function observeElement(element, property, callback, delay = 0) {
            let elementPrototype = Object.getPrototypeOf(element);
            if (elementPrototype.hasOwnProperty(property)) {
                let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property);
                Object.defineProperty(element, property, {
                    get: function() {
                        return descriptor.get.apply(this, arguments);
                    },
                    set: function () {
                        let oldValue = this[property];
                        descriptor.set.apply(this, arguments);
                        let newValue = this[property];
                        if (typeof callback == "function") {
                            setTimeout(callback.bind(this, oldValue, newValue), delay);
                        }
                        return newValue;
                    }
                });
            }
        }

        // observeElement() recive como argunmentos:
        //  - el input a observar
        //  - donde se observa el cambio, en este caso su valor
        //  - la función a ejecutar (callback) cada vez que hay un cambio
    </script>
</body>
</html>

Un poco de info general sobre los mutator observers (en inglés aquí): https://github.com/rafaelw/mutation-summary

1
  • Interesante respuesta !
    – Mateo Guio
    el 27 ene. 2022 a las 22:04
0

Amigo contrui un codigo con BootStrap y Jquery para detectar cuando el select cambio, luego capturo el valor del select y lo asigno al input. Finalmente evaluo ese valor con un switch para detectar si cambio. Solo debes adaptarlo a tu proyecto.

<!DOCTYPE html>
<html lang="en">
    <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>NOTA MEDIA</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <body>
        <div class="row justify-content-center mt-5">
            <div class="col-lg-4 text-center bg-warning p-4">
                <form>
                    <select id="mySelect">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <input type="" id="myInput" name="" value="" disabled>
                </form>
            </div>
        </div>
        <!-- Requerir BootStrap -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <!-- requerir Sweet Alert -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready( ()=>{
                //Detectar el cambio del select
                $("#mySelect").change( ()=>{
                    //Capturar valor del select
                    var select = $("#mySelect").val()
                    //Asignar valor del select al input
                    $("#myInput").val(select)
                    //Validar el valor del input con un switch
                    switch (select) {
                      case '1':
                        console.log("Detecto cambio a valor 1")
                        break;
                      case '2':
                        console.log("Detecto cambio a valor 2")
                        break;
                      case '3':
                        console.log("Detecto cambio a valor 3")
                        break;
                      default:
                        console.log("Detecto cambio a valor diferente")
                        break;
                    }
                })
            })
        </script>
    </body>
</html>

1
  • 1
    Buen intento, sin embargo, esto no responde a la pregunta sobre cómo detectar cambios en un campo deshabilitado que, en teoría, no puede ser modificado por acciones del usuario, sino por la lógica del script, por lo que no se desencadena el evento.
    – Triby
    el 27 ene. 2022 a las 23:27

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.