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 respuestas
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
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>
-
1Buen 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.– TribyCommented el 27 ene. 2022 a las 23:27
addEventListener('change', ....)
o en jquery sería.change