Best way to track onchange as-you-type in input type="text"?
Solution 1:
These days listen for oninput
. It feels like onchange
without the need to lose focus on the element. It is HTML5.
It’s supported by everyone (even mobile), except IE8 and below. For IE add onpropertychange
. I use it like this:
const source = document.getElementById('source');
const result = document.getElementById('result');
const inputHandler = function(e) {
result.innerHTML = e.target.value;
}
source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler);
<input id="source">
<div id="result"></div>
Solution 2:
Update:
See Another answer (2015).
Original 2009 Answer:
So, you want the onchange
event to fire on keydown, blur, and paste? That's magic.
If you want to track changes as they type, use "onkeydown"
. If you need to trap paste operations with the mouse, use "onpaste"
(IE, FF3) and "oninput"
(FF, Opera, Chrome, Safari1).
1Broken for <textarea>
on Safari. Use textInput
instead
Solution 3:
Below code works fine for me with Jquery 1.8.3
HTML : <input type="text" id="myId" />
Javascript/JQuery:
$("#myId").on('change keydown paste input', function(){
doSomething();
});
Solution 4:
Javascript is unpredictable and funny here.
-
onchange
occurs only when you blur the textbox -
onkeyup
&onkeypress
doesn't always occur on text change -
onkeydown
occurs on text change (but cannot track cut & paste with mouse click) -
onpaste
&oncut
occurs with keypress and even with the mouse right click.
So, to track the change in textbox, we need onkeydown
, oncut
and onpaste
. In the callback of these event, if you check the value of the textbox then you don't get the updated value as the value is changed after the callback. So a solution for this is to set a timeout function with a timeout of 50 mili-seconds (or may be less) to track the change.
This is a dirty hack but this is the only way, as I researched.
Here is an example. http://jsfiddle.net/2BfGC/12/