CODEWITHSUNDEEP
javascripthtmleventsinputaddeventlistener
Chris Marie
Chris Marie

Reputation: 1418

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

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.loging 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?

Upvotes: 2

Views: 5932

Answers (4)

Ijon Tichy
Ijon Tichy

Reputation: 456

You should try listening to the 'input' event instead of 'change'.

text = document.getElementById('userInput');
text.addEventListener('input', function() { console.log('hello world'); });

'keyup' is also very good, but if you press and hold a button, console.logging will happen only when you release it.

Upvotes: 1

Meir Amar
Meir Amar

Reputation: 1

  1. change event - fired only when input lose focus, and the string value is different then it was before.

  2. key up - you can use the key up event:

    In HTML:

    <element onkeyup="myScript">

    In JavaScript: object.onkeyup=function(){myScript};

    In JavaScript, using the addEventListener() method: object.addEventListener("keyup", myScript);

    Live example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown_onkeyup

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

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.

.

Upvotes: 7

TResponse
TResponse

Reputation: 4125

Try using on KeyUp then look at the value inside http://www.w3schools.com/jsref/event_onkeyup.asp

You can specify a min length before checking the text. May not be exactly what you after but may be a start

or you can use onchange http://www.w3schools.com/jsref/event_onchange.asp

Upvotes: 0

Related Questions