Question

I need to call a function to check the value of a form input box after the keyDown event and all its corresponding callback handlers have finished and returned. I know I need this because if I place a timer in the callback handler which checks the value of the input box after 200 ms or so the value is as expected, but if I check the value at the end of the callback handler itself, its empty.

// case 1
$('textbox').keyDown(function(){
  ...
  console.log($(this).val());   // empty, not as expected
});

// case 2
$('textbox').keyDown(function(){
  ...
  var $textbox = $(this);
  var timer = setTimeout(function(){
    console.log($textbox.val());    // works as expected
    clearTimeout(timer);
  }, 200);
});

So, is there a clean way in javascript/jQuery to call a function after an event has completely finished?

(And yes, I’m aware of the onChange event, but I’ve tried it and it doesn’t work for this scenario. I’m trying to detect user-defined key combinations and this is a corner case. And in this corner case, the keyPress and keyUp events don’t fire either, just keyDown.)

Answer 1

Use keyUp, instead. keyDown is fired before input; keyUp is fired after.