Pure JavaScript listen to input value change

Question

Is there a way I can create a constant function that listens to an input, so when that the 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 like, for example:

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

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 manually via JavaScript you should use custom event (any name, like 'myEvent', 'ev', etc.). If you need to listen to forms 'change' or 'input' event and you change inputs value via JavaScript, you can name your custom event 'change' or '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(event);

Creating and triggering events

Answer 5

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

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

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

Answer 6

HTML form input contain many events. Refer from HTMLElement, on the sidebar go to Events menu and expand it. You will see many useful events, such as beforeinput, change, copy, cut, input, paste, and drag drop events.

iput & change

The beforeinput, and input events are fired by order when you type the form input value.

When the form input value has changed and you lost focus on that input, the change event is fired.

Cut, copy, and paste

When you cut (CTRL + X on keyboard shortcut) the input value, the cut, beforeinput, input events are fired. When you copy (CTRL+C on keyboard shortcut), the copy event is fired alone.

When you paste the value from the clipboard (Ctrl + V on the keyboard shortcut), the paste, beforeinput, input events are fired.

JavaScript change value

To change the input value by JavaScript and make important events work, you need to dispatch at least two events by order. One is input and two is change. So that you can focus your code to listened to input or change event. It's easier this way.

Here is all the sample code.

(() => {
    let inputText = document.getElementById('text');
    let submitBtn = document.getElementById('submit');
    let triggerJSBtn = document.getElementById('button');

    submitBtn.addEventListener('click', (event) => {
        event.preventDefault(); // just prevent form submitted.
    });

    triggerJSBtn.addEventListener('click', (event) => {
        const thisTarget = event.target;
        event.preventDefault();
        inputText.value = thisTarget.innerText;
        inputText.dispatchEvent(new Event('input'));
        inputText.dispatchEvent(new Event('change'));
    });

    inputText.addEventListener('beforeinput', (event) => {
        const thisTarget = event.target;
        console.log('beforeinput event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('input', (event) => {
        const thisTarget = event.target;
        console.log('input event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('change', (event) => {
        const thisTarget = event.target;
        console.log('change event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('cut', (event) => {
        const thisTarget = event.target;
        console.log('cut event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('copy', (event) => {
        const thisTarget = event.target;
        console.log('copy event. (%s)', thisTarget.value);
    });

    inputText.addEventListener('paste', (event) => {
        const thisTarget = event.target;
        console.log('paste event. (%s)', thisTarget.value);
    });
})();

/* For beautification only */

code {
    color: rgb(200, 140, 50);
}

small {
    color: rgb(150, 150, 150);
}

<form id="form">
    <p>
        Text: <input id="text" type="text" name="text">
    </p>
    <p>
        Text 2: <input id="text2" type="text" name="text2"><br>
        <small>(For lost focus after modified first input text so the <code>change</code> event will be triggered.)</small>
    </p>
    <p>
        <button id="submit" type="submit">
            Submit
        </button>
        <button id="button" type="button">
            Trigger JS to set input value.
        </button>
    </p>
    <p>Press F12 to view results in your browser console.</p>
</form>

Please press F12 to open the browser's console and see the result there.

Answer 7

Each time a user inputs some value, do something.

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

Answer 8

IMHO, it's just 'onchange' mistaken as 'oninput' which are two different things.

Answer 9

Keydown, keyup, and 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 10

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 11

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...")
    })
});