Best way to track onchange as-you-type in input type="text"?

Question

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 :-)

Answer 1

You could use the keydown, keyup and keypress events as well.

Answer 2

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, Safari¹).

¹_{Broken for <textarea> on Safari. Use textInput instead}

Answer 3

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.

Answer 4

onkeyup happens after you type for example I press "t" when I lift the finger the action happens but on keydown the action happens before I digit the character "t"

Hope this is helpfull for someone.

So onkeyup is better for when you whant to send what you just typed NOW.

Answer 5

If you use ONLY Internet Explorer, you can use this:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Hope that helps.

Answer 6

However I've tried this, but what if the user types in a unicode character using ALT+NUM, the event does not detect the text change until the user either triggers the event with another character input

How should we go about tracking text change when user enters ALT+Num character?