Issues with jQuery .blur() and .focus() events

Question

I have a form with a few input fields. When a user clicks on an input field, a hidden div appears with some selections for that field, they can then choose an option, and this set as the field value.

Currently, the way the div gets hidden is when the user selects an option. This works fine, but what if a user does not want to select an option, the div won't be removed. So, my solution was to use a blur event on the input fields, which would hide their div element. That way, a user could tab through the form, seeing the hidden div, and hiding it when they leave that field. This works correctly as well.

The problem arises when they now DO want to click something from the div to be filled into the input. Because I have added a blur even, that even fires when the user is trying to click an option in the div, effectively hiding the div a slight second before the user clicks, therefor adding nothing to the input field.

What would be the best way to solve this problem? I would like to have the blur event to hide the div, but there needs to be some sort of exception when the user wants to click inside the div, that the blur event won't hide the div that they are trying to click into.

Thanks for the help.

Answer 1

You could set a timeout on the blur event and hide the "help div" immediately only when another input field is in focus.

Something like this:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

You could of course make this more generic and it could use some fine-tuning, but you get the idea...

Answer 2

Onblur, set a timeout that waits a second before hidding the corresponding div. Then, onclick, clear the timeout. Here's a basic example...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

Answer 3

I would put add a close button with a tab stop immediately after that field. This would solve the problem of a user who doesn't know the secret (tabbing through) possibly not realizing there is a way to dismiss the dialog without choosing an option.

Answer 4

very good, excellent post