In my experience, input type="text" onchange event usually occurs only after you leave (blur) the control.
Is there a way to force browser to trigger onchange every time textfield content changes? If not, what is the most elegant way to track this “manually”?
Using onkey* events is not reliable, since you can right-click the field and choose Paste, and this will change the field without any keyboard input.
Is setTimeout the only way?.. Ugly :-)
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
I think in 2018 it's better to use the input event.
-
As the WHATWG Spec describes (https://html.spec.whatwg.org/multipage/indices.html#event-input-input):
Fired at controls when the user changes the value (see also the change event)
-
Here's an example of how to use it:
<input type="text" oninput="handleValueChange()">
I had a similar requirement (twitter style text field). Used onkeyup and onchange. onchange actually takes care of mouse paste operations during lost focus from the field.
[Update] In HTML5 or later, use oninput to get real time character modification updates, as explained in other answers above.
Use oninput instead of onchange.
index.html
<html>
<head>
<title>title here</title>
<script src="index.js"></script>
</head>
<body>
<input oninput="onclickhandler(this)"></input>
</body>
</html>
script.js
function onclickhandler(e) {
console.log(e.value);
}
there is a quite near solution (do not fix all Paste ways) but most of them:
It works for inputs as well as for textareas:
<input type="text" ... >
<textarea ... >...</textarea>
Do like this:
<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>
As i said, not all ways to Paste fire an event on all browsers... worst some do not fire any event at all, but Timers are horrible to be used for such.
But most of Paste ways are done with keyboard and/or mouse, so normally an onkeyup or onmouseup are fired after a paste, also onkeyup is fired when typing on keyboard.
Ensure yor check code does not take much time... otherwise user get a poor impresion.
Yes, the trick is to fire on key and on mouse... but beware both can be fired, so take in mind such!!!
Method 1: Add an event listener for input:
element.addEventListener("input", myFunction);
Method 2: Define the oninput property with JavaScript:
element.oninput = function()
{
myFunction();
};
Method 3: Define the oninput property with HTML:
<input type="text" oninput="myFunction();">