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?

gespinha
fuente

Respuestas:

133

Para eso están los eventos .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});
Quentin
fuente
21
No funcionaría si javascript cambia el valor de entrada
ImShogun
1
Tenga en cuenta que typeof this.valuees string. Si se necesita un número, conviértalo con parseInt o parseFloat .
Akseli Palén
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/

Escarbato
fuente
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
});
AmerllicA
fuente
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

Azune-NK
fuente
-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...")
    })  
});
kai
fuente
op solicitó forma "pura javascript", es decir, sin jQuery - por lo tanto los downvotes
Revelt