JQuery blur event

Question

I have a text area and a "add" button on a form. By default the text area is shown as shrinked and grayed out. On focus it will be highlighted by changing the style. On blur it should go back to previous state. Along with highlighting the textarea, add note should toggle as visible and hidden. The problem is when i enter the data in text area and click on the add button, the blur event is hiding the add button and the event on the add button is never triggered.. any solution??

It seems like my question is not clear... The solution is something like execute the blur event except that the next focused element is not the "add" button...

Answer 1

Put a small delay between the focus leaving the textbox and the button being hidden, e.g.

function textBox_blur(evt) 
{
    window.setTimeout(
        function() { button.style.display = 'none'; },
        200 // length of delay in milliseconds
    );
}

This will leave enough time for the click to process (though you might want to play with the length of the delay)

Answer 2

You need to unhighlight your textarea and hide the "add" button only if there is nothing entered in the textarea:

$('textarea').blur(function() {
    if($(this).val() != '') {
        // unhighlight textarea
        // hide "add" button
    }
});

This way the user always sees the field and button if they actually entered something into it, regardless of whether it has focus or not.

Answer 3

If there is text entered is it safe to assume you don't want to toggle the button because the user has the intention of entering a note? If so you could do something like:

$(textBox).blur(function() {
  if($(this).val().length == 0) {
    //change the style
    //hide the button
  }
})