Pure Javascript listen to input value change

javascript input value change
javascript input onchange get value
get input value from event javascript
input event listener
javascript trigger input event
javascript event listener
input change event

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?

This is what events are for.

HTMLInputElementObject.addEventListener('input', function (evt) {

HTMLElement: change event, The change event is fired for input, select, and textarea elements when an alteration to the element's value is committed by the user. Unlike the  I have two buttons and if I click on some button I need to change value in input text and change total price (product price * value of button - 2 or 4 Qty). I know that it's simple but I'm not g

As a basic example...


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


/* 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/

HTMLElement: input event, The change event triggers when the element has finished changing. For text input type = " text " onchange = " alert(this.value) " > < input type  Actually, for every DOM element with "id" attribute, a matching variable is created on the global Window object. (open the console and type "mainbar" on this page). more than this, for modern browsers you can just type "value" and leave the "this".

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

Events: change, input, cut, copy, paste, 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  Sometimes we need to set a default value of the <input> element, This example explains methods to do so. Text Value Property This property set/return the value of value attribute of a text field. The value property contains the default value, the value a user types or a value set by a script. Syntax: Return the value property: textObject.value

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


        console.log("Field has been changed...")

Pure Javascript listen to input value change, Execute a JavaScript when a user writes something in an <input> field: This event occurs when the value of an <input> or <textarea> element is changed. For the benefit of others to simplify this answer, basically just call $(this).trigger('change'); in the function that changes the value of the text input programmatically, where "this" is the text input. – Vincent Apr 4 at 16:23

oninput Event, The onchange attribute fires the moment when the value of the element is changed. Execute a JavaScript when the user changes the content of an input field:. Using .value = does change the current value only. Resetting the form (with <input type="reset" /> for example) will change the value back to the original one. In contrast, setAttribute("value", ) works properly in Firefox and Chrome. The default value is changed but the actual value is only changed if the user have not modified it already.

HTML onchange Attribute, Execute a JavaScript when an input field gets focus: <input type="text" When the input field gets focus, replace its current value with an empty string --> <input​  @liho1eye paste is just one that I thought of, I'd rather listen for a definitive change than have to think of all the different incoming paths. – Jeriko Jan 5 '12 at 18:13 @Jeriko That is the only two ways value can be changed (beside the obvious updating via js code).

onfocus Event, Specifies the function to remove. useCapture, Optional. A Boolean value that specifies the event phase to remove the event handler from. Possible values: true -  The third parameter is a boolean value specifying whether to use event bubbling or event capturing. This parameter is optional. Note that you don't use the "on" prefix for the event; use " click " instead of " onclick ".

  • Would not work if input value is changed by javascript
  • Note that typeof this.value is string. If a number is needed, convert it with parseInt or parseFloat.
  • Would not work if input content is changed by javascript. neither with 'input' nor 'change' event.
  • What event can you listen to when the value is changed by javascript?
  • And as the others pointed out, doesn't trigger until you exit the input field either. Old answer by now, I know. But these answers pop up surprisingly often and they never mention the limitations.
  • Sadly the first option losses the this context. And sure, one can reference HTMLInputElementObject but that might change over time if you're using temporary placeholders when setting up the element. Not saying this is wrong, but it's dicy.
  • Yes, definitely you right my friend @Torxed.
  • They wanted a pure JS solution. This depends on jQuery.