Best way to track onchange as-you-type in input type="text"?
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>
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();
});
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