CODEWITHSUNDEEP
jquery
Karem
Karem

Reputation: 18103

jQuery: focus and blur

I have a form called #status. I would like to if you focus on the form input, #statusUpdate, then the submit button, #submitStatus should appear.

I've did this:

$("#statusUpdate").focus(function(){
    $("#submitStatus").show();
});

$("#statusUpdate").blur(function(){
    $("#submitStatus").hide();
});

This works fine, now my issue is when the #submitStatus appears, and you want to click on it, it disappears in the same splitsecond, because the #statusUpdate focus gets lost (blur) and therefore hides it.

How can this be fixed?

Upvotes: 1

Views: 412

Answers (2)

Piotr Findeisen
Piotr Findeisen

Reputation: 20710

odd design ;) You can wrap hide in a setTimeout like this

setTimeout(function() { $("#submitStatus").hide(); }, 100)

or use jQuery delay (requires adding some param to hide())

Upvotes: 2

Srikanth Rayabhagi
Srikanth Rayabhagi

Reputation: 1443

If I understand you right, you are looking for something that hides the submit button and you want to show the submit button, once you obtain focus on the status Update. What you are doing in your snippet is that as long as there is focus on the status update box, the submit button will be shown, but if you try to click on it, the focus is lost and immediately the submit button hides. This is not the desired result. The above answer sounds good and it will allow you have the enough time for you to click on the button you need. The total snippet would be

$("#statusUpdate").focus(function(){
    $("#submitStatus").show();
});

$("#statusUpdate").blur(function(){
    setTimeout(function() { $("#submitStatus").hide(); }, 600);
});

Its good to give some way around 600ms for the user to interact.

Upvotes: 0

Related Questions