只关注一次 - Jquery答案

【问题标题】：Focus only one time - Jquery只关注一次 - Jquery
【发布时间】：2013-07-08 14:43:58
【问题描述】：

嗨，朋友们，我有一个 textarea，我想在这个元素上使用 animate() 和 css() 函数。

css() 函数工作正常，但问题是 focus() 函数。页面加载后一切正常，

当我聚焦到 textarea 时，它的高度增加了 50px，但是当我模糊然后再次聚焦到 textarea 时，高度又增加了 50px。

我不想使用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>

【问题讨论】：

标签： jquery focus lost-focus

【解决方案1】：

要只触发一次事件，您可以使用one() 函数，该函数附加一个事件侦听器，然后在第一次触发后将其移除：

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

});

Working Demo

【讨论】：

【解决方案2】：

您可以使用jQuery's .one() function 轻松完成此操作。对于它所附加的元素，这最多只会触发一次事件处理程序。

在这种情况下，您不需要使用$(document).ready(function()...（除非您的脚本在您的#sharePost 元素之前）。作为一个例子，你可以这样做：

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

在元素上的第一个 focus 之后，包含您的 .animate 和 .css 的处理程序将永远不会再次运行。如果您想要在焦点离开元素时缩回，您可以从那里开始。

【讨论】：