Question

Why does the onchange event of my textbox fire on blur, but does not fire by every typed character ?

I want to get the entire entered text in textbox by every type by keyboard!

But onchange event only is fired on blur!

Besides onkeyup - onkeypress - onkeydown events do not help because at first these events fire and then last entered character is applied to the textbox.

What event should I use or how can I do that?

Answer 1

you want keyup, keydown, or a combination of them. during the keydown handler, you can get the before-event value of the textbox. during the keyup handler, you can get the after-event value. if you’re getting an empty string you’re doing something wrong.

edit: here’s an example demonstrating how these 2 events works. typing in the first box updates the other two.

<table>
    <tr>
        <td>input</td>
        <td><input type="text" id="textin" /></td>
    </tr>
    <tr>
        <td>keydown</td>
        <td><input type="text" id="keydownout" /></td>
    </tr>
    <tr>
        <td>keyup</td>
        <td><input type="text" id="keyupout" /></td>
    </tr>
</table>
<script>

    var readbox = document.getElementById('textin');
    var keydownbox = document.getElementById('keydownout');
    var keyupbox = document.getElementById('keyupout');

    function keydownhandler(e) {
        keydownbox.value = readbox.value;
    }

    function keyuphandler(e) {
        keyupbox.value = readbox.value;
    }

    readbox.addEventListener('keydown', keydownhandler, false);
    readbox.addEventListener('keyup', keyuphandler, false);

</script>

(works in firefox/chrome)