2

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!

12
  • Which default handling are you referring to?
    – Undefined
    Jan 6, 2013 at 22:43
  • 1
    Which event? What about simply waiting for 0 miliseconds? Jan 6, 2013 at 22:43
  • @Sam the browser action, I assume. It's typically called the "default action". Jan 6, 2013 at 22:44
  • @Sam: the keypress event, specifically.
    – JeffK
    Jan 6, 2013 at 22:45
  • @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 6, 2013 at 22:45

3 Answers 3

4

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.

0
1

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();
};
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.