I'm having an interesting problem where I'm using keyup and blur on a form element. I need to allow the blur and keyup events bubble up from the fields to the form where I can capture them.

$('form').on('focusout submit keyup', function(e) {
    console.log($(e.target).attr('id'));
    $(e.target).css('background','red');
});

/

Problem is that keyup and blur fire when you tab out of a field. This is because when you tab out of a field the blur events fires on that field, but when you lift the key you're already in the new field so the keyup event is also fired for that.

I've been trying to figure a good solution....I've thought of a really horrible solution which involves adding a focusin/focus event to each field. If a field gets focus then find the next field in the dom and add a class to it to flag it as 'don't validate on first keypress'. But this just seems like a bad idea

I'm having an interesting problem where I'm using keyup and blur on a form element. I need to allow the blur and keyup events bubble up from the fields to the form where I can capture them.

$('form').on('focusout submit keyup', function(e) {
    console.log($(e.target).attr('id'));
    $(e.target).css('background','red');
});

http://jsfiddle/Z6Ayx/

Problem is that keyup and blur fire when you tab out of a field. This is because when you tab out of a field the blur events fires on that field, but when you lift the key you're already in the new field so the keyup event is also fired for that.

I've been trying to figure a good solution....I've thought of a really horrible solution which involves adding a focusin/focus event to each field. If a field gets focus then find the next field in the dom and add a class to it to flag it as 'don't validate on first keypress'. But this just seems like a bad idea

• javascript
• jquery

• Well tab is the key no? – GGio Commented May 21, 2014 at 19:46
• Yes suppose it's always the tab key that causes the blur...so maybe I can assume that if the tab key triggers the event then it's a blur event...maybe I can set a flag of there's been a blur event then don't allow the next keyup to trigger the event....is that what you mean? – Mike Rifgin Commented May 21, 2014 at 19:52
• see my answer for that – GGio Commented May 21, 2014 at 19:52

2 Answers 2

If you mean by tabbing out pressing tab key on keyboard, in that case tab is also the key so it will trigger the keyup event. Try the following to detect tab:

$('form').on('keyup focusout submit', function(e) {
    if (e.keyCode == 9) {
       //tab was pressed do something else, set a flag to true perhaps
    } else {
       console.log($(e.target).attr('id'));
       $(e.target).css('background','red');
    }
});

You will need to exclude the tab keyup event by checking for e.keyCode != 9 and preventing anything from happening.

This should work for you:

$('form').on('keyup focusout submit', function(e) {
  if (e.keyCode != 9) {
    console.log($(e.target).attr('id'));
    $(e.target).css('background','red');
  }
});