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>
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
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();});