Pure Javascript listen to input value change

Question

Is there any way I can create a constant function that listens to an input, so when that input value changes, something is triggered immediately?

I am looking for something using pure javascript, no plugins, no frameworks and I can't edit the HTML.

Something, for example:

When I change the value in the input MyObject , this function runs.

Any help?

Answer 1

This is what events are for.

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

Answer 2

As a basic example...

HTML:

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

Script:

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

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

Here's a fiddle: http://jsfiddle.net/Niffler/514gg4tk/

Answer 3

Actually, the ticked answer is exactly right, but the answer can be in ES6 shape:

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

Or can be written like below:

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

Answer 4

Default usage

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

But , if you want to fire event when you change inputs value manualy via JS you should use custom event(any name, like 'myEvent' \\ 'ev' etc.) IF you need to listen forms 'change' or 'input' event and you change inputs value via JS - you can name your custom event 'change' \\ 'input' and it will work too.

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

Answer 5

Another approach in 2020 could be using document.querySelector() :

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

myInput.addEventListener("change", (e) => {
  // here we do something
});

Answer 6

Keydown, keyup, input are events that fire immediately when input changes, I would use keydown or input events to get the changed value from the input box.

const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// your code goes here 
 console.log(myObject.value);
});

Answer 7

If you would like to monitor the changes each time there is a keystroke on the keyboard.

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

Answer 8

A different version of Quentin 's answer:

HTMLInputElementObject.addEventListener('input', (e) => {
    // Do something here...
});

Answer 9

Each time a user inputs some value, do something.

var element = document.getElementById('input');
element.addEventListener('input', function() {
 // Do something 
});

Answer 10

instead of id use title to identify your element and write the code as below.

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

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