CODEWITHSUNDEEP
jqueryhtmlinputfocus
Dmitri
Dmitri

Reputation: 579

JQuery: .focus() on input only on first click?

I have an input textbox that fades in as soon as the user clicks on a button, and then fades out if the user clicks on the button again. Each time the user clicks on the button, the input is focused since usually the first thing they do is type. The problem is that the input has a placeholder and when the user clicks on the button again, the placeholder flickers once in a very annoying way while the input fades out (this only happens if the input is focused when the user clicks on the button again).

So what I been trying to do the entire night yesterday is to have the input focus only on the first time the user clicks on the button, the second time they click to fadeout, the input should not focus.

Can you please help me achieve this? Thanks a lot!

        //takes care of showing search when clicking on add button
jQuery(".add-button").click(function() {



//shows and hides the textbox input
    jQuery(this).siblings(".search-input-form").fadeToggle(200);



 //triggers a focusing on the textbox input
    jQuery(this).next().children(".search-input").focus();




    return false;

});

Upvotes: 0

Views: 3341

Answers (2)

paul
paul

Reputation: 22001

switch fadeToggle for fadeIn and fadeOut:

    jQuery(".search-input-form").click(function () {

        if (jQuery(".search-input-form").css("visibility") = "hidden")
        {
            jQuery(this).siblings(".search-input-form").fadeIn(200);
            jQuery(this).next().children(".search-input").focus();
        }
        else 
        {
            jQuery(this).siblings(".search-input-form").fadeOut(200);
        }
        return false;

    });

Upvotes: 1

Per Salbark
Per Salbark

Reputation: 3645

You could use the $.toggle() function. It alternates between the provided functions on click.

$(".add-button").toggle(function() {
        var $input = $(this);

        //shows the textbox input
        $input.siblings(".search-input-form").fadeIn(200);

       //triggers a focusing on the textbox input
       $input.next().children(".search-input").focus();

       return false;
    },
    function() {
        var $input = $(this);

        //hides the textbox input
        $input.siblings(".search-input-form").fadeOut(200);

       // NO FOCUS HERE

       return false;
    });

Upvotes: 2

Related Questions