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?
javascript
gespinha
fonte
fonte
typeof this.value
éstring
. Se um número for necessário, converta-o com parseInt ou parseFloat .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/
fonte
Na verdade, a resposta marcada está exatamente certa, mas a resposta pode estar em
ES6
forma:HTMLInputElementObject.oninput = () => { console.log('run'); // Do something }
Ou pode ser escrito como abaixo:
HTMLInputElementObject.addEventListener('input', (evt) => { console.log('run'); // Do something });
fonte
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
fonte
Outra abordagem em 2020 poderia ser
document.querySelector()
:const myInput = document.querySelector('input[name="exampleInput"]'); myInput.addEventListener("change", (e) => { // here we do something });
fonte
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') })
fonte
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...") }) });
fonte