How to change the input tag's response to addEventListener('change')?

addeventlistener, events, html, input, javascript

Solution

According to the ref you have linked to on MDN: https://developer.mozilla.org/en-US/docs/Web/Events/change

Change is fired when:

When the element loses focus after its value was changed, but not commited (e.g. after editing the value of or

And according to this again on MDN: https://developer.mozilla.org/en-US/docs/Web/Events

Change:

An element loses focus and its value changed since gaining focus.

This means that only does the focus is lost, but the value should also have changed. If you do not change anything the `change` will not be fired.

In order to observe changes in an `input`, you could use `input` event.

From MDN again: https://developer.mozilla.org/en-US/docs/Web/Events/input

The DOM input event is fired synchronously when the value of an or element is changed.

You can see that using this snippet below. On `change` you have to `tab` out of the `input` to see the value whereas on `input` the value can observed on every input on the `input`. You could also use `keyup`, but input is the way to do it.

Snippet:

text = document.getElementById('userInput');
resultChange = document.getElementById('result-change');
resultInput = document.getElementById('result-input');
resultKeyup = document.getElementById('result-keyup');

text.addEventListener('change', function() {
    resultChange.innerText = text.value;
});

text.addEventListener('input', function() {
    resultInput.innerText = text.value;
});

text.addEventListener('keyup', function() {
    resultKeyup.innerText = text.value;
});

<input type="text" id='userInput' placeholder='enter characters here'/><hr />
<h3>On change</h3><p id="result-change"></p><hr />
<h3>On input</h3><p id="result-input"></p><hr />
<h3>On keyup</h3><p id="result-keyup"></p>

Note: handling `input` event is better for such scenarios.

.

Problem

I take text form the user with an html input tag. When the user types a character into the input element, I want to `console.log` the text they have just typed; it would look like I am `console.log`ing for each letter. I attempted this by adding an event listener for `'change'` on the `input` tag. To demonstrate what I mean, I have simplified my problem in the code below... `<input type="text" id='userInput' placeholder='enter characters here'/> ` In JS script: `text = document.getElementById('userInput'); text.addEventListener('change', function() { console.log('hello world'); });` I chose the `'change'` event because I thought that typing text into an `input` tag element would equate to changing that element, such that every time the user types into the `input` element, it logs 'hello world'. However, the `'change'` event for the `input` element is not what I expected. What actually happens is that 'hello world' is not logged until you hit 'enter' inside of the `input` element (ie a `'change'` event for a div might look different than a `'change'` event for a button). I have been experimenting with this inside of Firebug, and I was looking at the `addEventListener` and `change` documentation on MDN, and have read that the change event listens to various tags differently. Does anyone know a way to modify the `input` change event for `addEventListener` to register actual text changes, not only just when someone hits enter inside `input`? or else If I cannot specify the `'change'` event for `input`, does anyone know of another way to `console.log` each character as it is typed into `input`?

Original source