JQuery: .focus() при вводе только при первом щелчке?

У меня есть текстовое поле ввода, которое исчезает, как только пользователь нажимает кнопку, а затем исчезает, если пользователь снова нажимает кнопку. Каждый раз, когда пользователь нажимает на кнопку, ввод фокусируется, поскольку обычно первое, что он делает, это печатает. Проблема в том, что ввод имеет заполнитель, и когда пользователь снова нажимает кнопку, заполнитель один раз очень раздражающе мерцает, в то время как ввод исчезает (это происходит только в том случае, если ввод сфокусирован, когда пользователь снова нажимает кнопку ).

Итак, что я пытался сделать вчера всю ночь, так это сфокусировать ввод только на первый раз, когда пользователь нажимает кнопку, второй раз, когда он нажимает, чтобы исчезнуть, ввод не должен сфокусироваться.

Не могли бы вы помочь мне достичь этого? Большое спасибо!

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

});

focus input html jquery
person Dmitri    schedule 23.08.2012    source источник
comment
Не могли бы вы сделать jsfiddle.net?   -  person karim79    schedule 23.08.2012
comment
Небольшое примечание: вы можете использовать $(...) вместо jQuery(...).   -  person Rafael Adel    schedule 23.08.2012

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать функцию $.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;
    });
person Per Salbark    schedule 23.08.2012

arrow_upward
1
arrow_downward

переключить 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;

    });
person paul    schedule 23.08.2012
comment
Это отлично работает, но использование $.toggle() имеет лучшую производительность, поскольку нет необходимости проверять css ввода. И всякий раз, когда вы собираетесь использовать DOM-элемент более одного раза, кэшируйте его в локальной переменной, например: var input = $(".search-input-form");. Манипуляции с DOM сильно влияют на производительность в JavaScript. - person Per Salbark; 24.08.2012