Javascript puro escucha el cambio de valor de entrada


98

¿Hay alguna forma de que pueda crear una función constante que escuche una entrada, de modo que cuando ese valor de entrada cambie, algo se active inmediatamente?

Estoy buscando algo que use javascript puro, sin complementos, sin marcos y no puedo editar el HTML.

Algo, por ejemplo:

Cuando cambio el valor en la entrada MyObject, esta función se ejecuta.

¿Alguna ayuda?

Respuestas:



34

Como ejemplo básico ...

HTML:

<input type="text" name="Thing" value="" />

Guión:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

Aquí hay un violín: http://jsfiddle.net/Niffler/514gg4tk/


11
No funcionaría si javascript cambia el contenido de entrada. ni con evento 'entrada' ni 'cambio'.
ImShogun

9
¿Qué evento puedes escuchar cuando javascript cambia el valor?
zero_cool

3
Y como señalaron los demás, tampoco se activa hasta que salga del campo de entrada. Antigua respuesta a estas alturas, lo sé. Pero estas respuestas surgen sorprendentemente a menudo y nunca mencionan las limitaciones.
Torxed el

8

En realidad, la respuesta marcada es exactamente correcta, pero la respuesta puede estar en ES6forma:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

O se puede escribir como a continuación:

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

2

Uso predeterminado

el.addEventListener('input', function () {
    fn();
});

Pero , si desea disparar un evento cuando cambia el valor de las entradas manualmente a través de JS, debe usar un evento personalizado (cualquier nombre, como 'myEvent' \ 'ev', etc.) SI necesita escuchar los formularios 'change' o 'input' event y cambia el valor de las entradas a través de JS; puede nombrar su evento personalizado 'cambio' \ 'entrada' y también funcionará.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events


-7

en lugar de id, use title para identificar su elemento y escriba el código como se muestra a continuación.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});

op solicitó forma "pura javascript", es decir, sin jQuery - por lo tanto los downvotes
Revelt
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.