I have read in the article (the article) following concepts about event handlers:

For a non-bubbling event, the sequence of the dispatch is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element, which means that all event handlers registered on the element for the specific event are executed (in undefined order!)
3. The default action is performed (if it wasn't cancelled in any of the handlers)

For a bubbling event, the sequence is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element
3. Bubbling phase: The event is fired on all ancestor elements, from the target and upward.
4. The default action is performed (if it wasn't cancelled in any of the handlers)

Here, default action is essentially a browser activity which user expects when produced an event, i.e. character appearance in textarea when key was pressed.

Does any body now how attach callback that will be called after default action is performed? So I would like to catch an event when character appeared in textarea.

onchange is not a solution because it is fired when focus lost. onkeyup is not the solution also

Any ideas?

[UPD] I am trying to catch a textarea value change right after the change was happened. This is for copying value of textarea to a div. So when I use onkeydown event, the div content is updated with a delay of one key press. I want to have right after keypressed.

I have read in the article (the article) following concepts about event handlers:

For a non-bubbling event, the sequence of the dispatch is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element, which means that all event handlers registered on the element for the specific event are executed (in undefined order!)
3. The default action is performed (if it wasn't cancelled in any of the handlers)

For a bubbling event, the sequence is like this:

1. Capturing phase: All "capturing" event handlers are fired on all ancestor elements, from the top down.
2. The event is fired on the target element
3. Bubbling phase: The event is fired on all ancestor elements, from the target and upward.
4. The default action is performed (if it wasn't cancelled in any of the handlers)

Here, default action is essentially a browser activity which user expects when produced an event, i.e. character appearance in textarea when key was pressed.

Does any body now how attach callback that will be called after default action is performed? So I would like to catch an event when character appeared in textarea.

onchange is not a solution because it is fired when focus lost. onkeyup is not the solution also

Any ideas?

[UPD] I am trying to catch a textarea value change right after the change was happened. This is for copying value of textarea to a div. So when I use onkeydown event, the div content is updated with a delay of one key press. I want to have right after keypressed.

• javascript
• events

Share Improve this question Follow edited Feb 13, 2009 at 14:10 glaz666 asked Feb 13, 2009 at 13:06 glaz666glaz666 8,7311919 gold badges5858 silver badges7575 bronze badges 1

• What is it that you're trying to do? If you provide more information about the problem you're trying to solve we might be able to give you a good answer. There's no direct reason for why an onchange event handler wouldn't work and be specific, there's probably a workaround that you can try. – John Leidegren Commented Feb 13, 2009 at 13:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need onkeyup/onkeypress bination:

<script type="text/javascript">
$(document).ready(function(){
    // single button (abcd)
    $("#source").keyup(function() {
        $("#target").html( $(this).val() );
    });
    // pressed button (aaaaaaaa)
    $("#source").keypress(function() {
        $("#target").html( $(this).val() );
    });
});
</script>
<textarea id="source"></textarea>
<div id="target"></div>

This example uses jQuery.

This is a hack, but it should work if you add the following line to your regular event handler:

setTimeout(functionToExecuteAfterDefaultAction, 0);

---

Sergii had the right idea: keypress/keyup actually fire after the modification of the textarea's value. Here's a jQuery-less example:

<form>
<textarea></textarea>
<textarea></textarea>
</form>
<script>
var elements = document.forms[0].elements;
elements[0].onkeypress = elements[0].onkeyup = function() {
    elements[1].value = elements[0].value;
};
</script>

I know there were some problems with this approach when I implemented a growing textarea, but I can't remember what exactly went wrong :(