Как не терять фокус по инпуту?

Question

[viktorulyushev]

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

$(function () {
    $(".btn").focus(function () {
        $(".site-head-search-input-1").animate({ width: "592px" }, 400);
    }).blur(function () {
        $(".site-head-search-input-1").animate({ width: "366px" }, 400);
    });
});

Comments

[V Sh.]

Не совсем понятна идея с кнопкой. Зачем она нужна? Какое поведение пользователя ожидается при встречи с этой кнопкой?

[viktorulyushev]

V Sh.: Есть кнопка поиска,когда пользователь на нее нажимает,из нее выдвигается инпут,пользователь вводит там что то,ищет,когда фокус с инпута уходит то инпут закрывается

[V Sh.]

viktorulyushev: тогда после того, как кнопка нажата передайте фокус инпуту. Также повесьте обработчик blur не на кнопку, а на инпут. Поведение такое: пользователь нажимает на кнопку -> выезжает/трансформируется/отображается инпут (уже с фокусом). На самом инпуте стоит обработка потери фокуса, где можно скрывать элемент, а можно и не скрывать, если он не пустой.

[viktorulyushev]

V Sh.: пока только до такого додумался ,но не работает

$(".site-head-search-btn").click(function () {
            $(".site-head-search-input-1").focus(function () {
                $(".site-head-search-input-1").animate({ width: "592px" }, 400);
            }).blur(function () {
                $(".site-head-search-input-1").animate({ width: "366px" }, 400);
            });
        });

[viktorulyushev]

V Sh.: что не так?

[V Sh.]

viktorulyushev: вот примерное видение: jsfiddle

[V Sh.]

viktorulyushev: вот решение чуть получше, но с тем же смыслом... Еще можно добавить проверки разные: на наличие текста для поиска, например...

jsfiddle/1

[viktorulyushev]

V Sh.: да спасибо большое,но есть проблема,если 1 раз нажать на кнопку поиска то выдвенется инпут,я напечатаю что то там,нажму куда то к примеру,инпут закроется,а вот если опять нажать на кнопку то он сразу будет искать ,т.е перезагрузит страницу

[viktorulyushev]

V Sh.: можно ли как нибудь сделать чтобы первый клик всегда открывал инпут,а 2 уже поиск,а потеря фокуса обнуляла счетик?

[V Sh.]

viktorulyushev: можете попробовать вот так: линк

[viktorulyushev]

V Sh.: он все равно ищет сразу почему то

[viktorulyushev]

V Sh.: ааа,так может потому что у меня кнопка не button а просто ссылка с атрибутами?

[V Sh.]

viktorulyushev: нет, не должен. Там стоит проверка на пустую строчку. С пробелом да, будет искать. Если вас смущает то, что кнопка нажимается, то это нормально. Под поиском имеется ввиду алерт с текстом. Можете скриншот выложить, что вы там такое нажимаете, что но у вас по второму клику ищет?

[V Sh.]

viktorulyushev: ну вам надо у ссылки отменить действия по умолчанию. Допишите в код:

click(function(event) {
    event.preventDefault();
    //код
});

[viktorulyushev]

V Sh.: aptekamarket.promo-z.ru вот сайт,там сверху есть кнопка поиска,если ничего не вписано то все нормально,если написать что то,и если нажать кнопку то сразу будет искать,а надо чтобы выдвигалась

[viktorulyushev]

V Sh.: т.е после потери фокуса кнопки,1 клик всегда будет только раздвигать инпут,а вот если еще раз нажать то уже будет поиск

[viktorulyushev]

viktorulyushev: в общем надо чтобы работало как у вас в примере

[viktorulyushev]

V Sh.: а если я отключу стандартное действие у кнопки то она будет работать?там же у него data-ng-click="searchBlock.submit(searchBlock.search, false)"