Javascript puro escuta a mudança de valor de entrada

105

Existe alguma maneira de criar uma função constante que ouve uma entrada, de modo que quando o valor da entrada muda, algo é acionado imediatamente?

Estou procurando algo usando javascript puro, sem plugins, sem frameworks e não consigo editar o HTML.

Algo, por exemplo:

Quando eu mudo o valor na entrada MyObject, esta função é executada.

Qualquer ajuda?

gespinha
fonte

Respostas:

141

É para isso que servem os eventos .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});
Quentin
fonte
22
Não funcionaria se o valor de entrada fosse alterado por javascript
ImShogun
1
Observe que typeof this.valueé string. Se um número for necessário, converta-o com parseInt ou parseFloat .
Akseli Palén
34

Como um exemplo básico ...

HTML:

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

Roteiro:

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

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

Aqui está um violino: http://jsfiddle.net/Niffler/514gg4tk/

Niffler
fonte
11
Não funcionaria se o conteúdo de entrada fosse alterado por javascript. nem com 'input' nem 'change' event.
ImShogun
9
Que evento você pode ouvir quando o valor é alterado por javascript?
zero_cool
3
E como os outros apontaram, não dispara até que você saia do campo de entrada. Resposta antiga agora, eu sei. Mas essas respostas surgem com uma frequência surpreendente e nunca mencionam as limitações.
Torxed 02 de
@ImShogun alguma ideia sobre como "apoiar" o caso quando a entrada é alterada via JS?
Alessio
9

Na verdade, a resposta marcada está exatamente certa, mas a resposta pode estar em ES6forma:

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

Ou pode ser escrito como abaixo:

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

Uso padrão

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

Mas , se você deseja disparar o evento ao alterar o valor das entradas manualmente por meio de JS, você deve usar o evento personalizado (qualquer nome, como 'myEvent' \ 'ev' etc.) SE você precisar ouvir formulários de evento de 'mudança' ou 'entrada' e você altera o valor das entradas por meio de JS - você pode nomear seu evento personalizado de 'mudança' \ 'entrada' e ele também 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
fonte
0

Outra abordagem em 2020 poderia ser document.querySelector():

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});
Runsis
fonte
@customcommander obrigado pelo feedback. Resposta editada!
Executado em
0

Se você deseja monitorar as mudanças cada vez que há um pressionamento de tecla no teclado.

const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
   console.log('test') 
})
Niso
fonte
-7

em vez de id, use title para identificar seu elemento e escreva o código conforme abaixo.

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

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});
kai
fonte
op solicitou forma "puro javascript", o que significa que não há jQuery - daí os downvotes
revelt