javascript: Possible to add event handler that runs after the default behavior?

Question

I have an event handler that I would like to have executed after the default javascript handling of that event occurs.

Is this possible?

EDIT: For example: everytime a keypress event is fired, i'm logging event information about that keypress(similar to console.log). Now, when I press backspace and view the fields contents via the event handler, the value of the text field produces the value without the backspace since the event handler grabs the contents of the field before the actual removal of the last letter.

I would like, in this case, for the default backspace event to occur and then have my event handler fired upon completion.

Thanks!

@Sam the browser action, I assume. It's typically called the "default action". — John Dvorak, Jan 06 '13 at 22:44
@JanDvorak I don't really see the issue as you can just call a function in the click (etc) handler, but I would like to help. JeffK -> Can you show us the actual code you are having a problem with and add a little more information? — Undefined, Jan 06 '13 at 22:45
@Sam you can't always perform the default action - especially for keypresses. — John Dvorak, Jan 06 '13 at 22:47
@JanDvorak I would try and show how I understand the question but jsfiddle is throwing errors for me... — Undefined, Jan 06 '13 at 22:48
what about making a custom event, then when you listen for the default, trigger the custom? — Zeke Nierenberg, Jan 06 '13 at 22:48
@JeffK Does anything like this help? I am guessing a little because I don't fully understand the issue you are having. What problem are you actually trying to solve? http://pastebin.com/V64jFvev — Undefined, Jan 06 '13 at 22:50
The `keyup` event happens after the default keypress action. In a `textarea` for example, canceling `keypress` on the `A` key will prevent an `A` from appearing in the `textarea`. If a `keypress` is not cancelled, `keyup` will fire. — kendsnyder, Jan 06 '13 at 22:50
@Sam I edited the original post and explained the situation in detail :) — JeffK, Jan 06 '13 at 22:53
@JanDvorak Thanks for the suggestion! Though I'm hoping to find a proper, built in way of doing it. ;) — JeffK, Jan 06 '13 at 22:53

score 4 · Accepted Answer · edited May 23 '17 at 12:27

I believe your problem is caused by listening for the keypress event instead of the keyup event. Basically this means that you are getting the value of the textarea before the character is put in the dom.

Try changing your keypress handler to a keyup handler.

An example would be:

$('input, textarea').keyup(function(ev) {

    console.log( $(this).val() );

});

Edit: Found this question which appears to be your exact problem.

score 1 · Answer 2 · answered Jan 06 '13 at 23:05

I see that there was a different issue other than what is named in the question. In that regards, +1 Sam :).

However, I would like to address the question here, and not just the offshoot. There is a way to handle specific keypress events or default to one.

keypress bubbles. So use a global one, and then for anywhere you need it locally, use e.stopPropagation() in order to stop it from bubbling. Here is a demo of it working: http://jsfiddle.net/2EwhR/

here is the html:

<div id="d1">_</div>
<br><hr>
<div id="d2"><input id="i1" type="text" /></div>

js:

var d1 = document.getElementById("d1");
window.onkeypress = function(ev){
 d1.innerHTML = "keyCode: " + ev.keyCode;
};
var d2 = document.getElementById("d2");
var i1 = document.getElementById("i1");
d2.onkeypress = function(ev){
  d1.innerHTML = "blocked";
  ev.stopPropagation();
};

score 0 · Answer 3 · answered Jan 06 '13 at 22:53

This would be a way to run custom code after the event has bubbled up to the browser, i.e. the typed in value would first be added to the text field, then a second later your custom function would run. You could make this a much smaller amount of time if you wish.

$("input").on("keypress", function () {
  setTimeout(function () {
    alert("new value should have been already added to text field. Now we are executing some custom stuff");
  }, 1000);
  return true;
});

working demo

javascript: Possible to add event handler that runs after the default behavior?

3 Answers3

Linked