CODEWITHSUNDEEP
jqueryjquery-click-event
James
James

Reputation: 6008

jQuery focusOut except if

I simply want to hide a div, if a text box loses focus, unless, the user clicks in another certain div. If user clicks that particular div, then the focusout doesn't trigger the div.box being hidden.

Below is code with my pseudocode commenting. Any ideas?

textInput.focusout(function() {
    // So long you didn't click div.stop, then
        $('div.box').hide();
});

Upvotes: 4

Views: 7464

Answers (5)

user16626854
user16626854

Reputation: 41

Consider using with 'focus' instead of 'focusout' like this:

$('input').not(this).on('focus', function (e) {                 
    $("div.box").hide();
});

Upvotes: 0

DiegoSnip
DiegoSnip

Reputation: 1

You can solve this by setting timer on focusout:

$(document).on("focusout", "#textInput", function () 
{
    setTimeout(function ()
    {
        $('div.box').hide();
    }, 101); //I've added 101ms to wait before hiding. (Lower than 80 often fails on my pc)
});

Upvotes: 0

vuong
vuong

Reputation: 41

$(document).bind('click',function(e) {
  if ($(e.target).closest('div.box').length) return;
  $('div.box').hide();
});

Try this!

Upvotes: 4

sje397
sje397

Reputation: 41862

var flag = false;

$('div.stop').click(function() {flag = true;});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    if(!flag)
        $('div.box').hide();
});

If you wanted to avoid adding the flag variable, you could use jQuery's .data to store the flag value against e.g. the div.stop element, e.g:

$('div.stop').click(function() {$(this).data('clicked', true);});

// ...

    if(!$('div.stop').data('clicked'))
// ...

EDIT

If you want to allow for the situation where the text box has focus, and you then click on div.stop, and you don't want it to hide, then you could try something like:

$('div.stop').click(function() {$('div.box').stop();});
textInput.focusout(function() {
    // So long you didn't click div.stop, then
    $('div.box').delay(200).hide();
});

Upvotes: 3

Reigel Gallarde
Reigel Gallarde

Reputation: 65284

var flag = false;
$('#inputID').blur(function(){
   $('div.box').toggle(flag);       
});

$('#someDIVid').click(function(){
    flag = true;
});

simple demo

added notes:

.toggle( showOrHide )

showOrHide A Boolean indicating whether to show or hide the elements. If this parameter is true, then the matched elements are shown; if false, the elements are hidden.

Upvotes: 2

Related Questions