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

【问题标题】：JQuery: .focus() on input only on first click?JQuery：.focus（）仅在第一次点击时输入？
【发布时间】：2012-08-23 14:21:00
【问题描述】：

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

所以我昨天整晚都在尝试让输入焦点只在用户第一次点击按钮时，第二次点击淡出时，输入不应该集中。

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

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

});

【问题讨论】：

你能做一个jsfiddle.net吗？
请注意：您可以使用$(...) 代替jQuery(...)。

标签： jquery html input focus

【解决方案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;
    });

【讨论】：

【解决方案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;

    });

【讨论】：

这工作正常，但使用$.toggle() 具有更好的性能，因为不需要检查输入的css。并且每当您要多次使用 DOM 元素时，请将其缓存在局部变量中，如下所示：var input = $(".search-input-form");。 DOM 操作是 JavaScript 的一大性能消耗。