Question

我有一个输入文本框，一旦用户点击按钮就会淡入，然后在用户再次点击该按钮时淡出。每次用户点击按钮时，输入都会被聚焦，因为通常他们做的第一件事就是打字。问题是输入有一个占位符，当用户再次点击按钮时，占位符以一种非常恼人的方式闪烁一次，同时输入淡出（只有当用户再次点击按钮时输入被聚焦时才会发生这种情况）。

所以昨天整个晚上我一直试图让输入的焦点只在用户第一次点击按钮时，第二次点击淡出时，输入不应该聚焦。

你能帮助我实现这个目标吗？非常感谢！

        //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;

});

Answer 1

您可以使用$.toggle()功能。它在点击时提供的功能之间交替。

$(".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;
    });

Answer 2

为fadeToggle和fadeIn切换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;

    });

JQuery：.focus（）仅在第一次点击时输入？

2 个答案: