Сосредоточьтесь только один раз - Jquery

Привет, друзья, у меня есть текстовое поле, и я хочу использовать функции animate() и css() с этим элементом.

Функция css() работает нормально, но проблема в focus() функции. После загрузки страницы все нормально,

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

Я не хочу использовать функцию blur().

Мой вопрос касается использования функции focus(). Я хочу использовать focus() один раз при загрузке страницы.

<script>
              $(document).ready(function(){
                  $("#sharePost").focus(function(){
                  $(this).animate({height:"+=50px"});
                  $(this).css("background-color","#ffccdd");
                  });
                  $("#sharePost").blur(function(){
                  //$(this).animate({height:"-=50px"});
                  });
              });
</script>

focus jquery lost-focus
person hakiko    schedule 08.07.2013    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Чтобы запустить событие только один раз, вы можете использовать функцию one(), которая прикрепляет прослушиватель событий, а затем удаляет его после первого время выстрела:

$(document).ready(function(){
    $("#sharePost").one('focus', function(){
        $(this).animate({height:"+=50px"});
        $(this).css("background-color","#ffccdd");
    });

});

Рабочая демонстрация

person cfs    schedule 08.07.2013

arrow_upward
2
arrow_downward

Это легко сделать с помощью функции jQuery .one(). Это запускает обработчик событий не более одного раза для элемента, к которому он прикреплен.

В этом случае вам не нужно будет использовать $(document).ready(function()... (если только ваш скрипт не появится перед вашим элементом #sharePost). В качестве примера вы можете просто сделать:

$("#sharePost").one("focus", function(){
    $(this).animate({height:"+=50px"});
    $(this).css("background-color","#ffccdd");
});

После первого focus в элементе обработчик, содержащий ваши .animate и .css, больше никогда не запустится. Вы можете пойти оттуда, если хотите, чтобы уменьшиться, когда фокус покидает элемент.

person Eric Olson    schedule 08.07.2013