Question

考虑以下HTML：

<form ....>
   <textarea>....</textarea
   <input .... />
</form>

现在我想在用户专注于任何表单元素时显示帮助部分。当焦点消失时，帮助信息也应该如此。

我的想法是：

$("form").focus(function(){...});
$("form").unfocus(function(){...});

但它似乎不起作用。有任何想法吗？非常感谢你的帮助！

汤姆

增加：非常感谢你，它很有效。我使用了lonesomeday的解决方案，但我的动画还有另一个问题：

$('form').delegate(':input', 'focus', function() {

    $("#eintrag").animate({"height": "160px"}, 500)
    $("#header").animate({"height": "200px"}, 500)
    $("#container").animate({"margin-top": "240px"}, 500)
    $(".show").animate({"opacity": "0"}, 500)
    $(".hide").animate({"opacity": "1"}, 500)
    $("#header_links>p").animate({"opacity": "0"}, 500)

}).delegate(':input', 'blur', function() {

    $("#eintrag").animate({"height": "20px"}, 500)
    $(".show").animate({"opacity": "1"}, 500)
    $("#container").animate({"margin-top": "150px"}, 500)
    $(".hide").animate({"opacity": "0"}, 500)
    $("#header_links>p").animate({"opacity": "1"}, 500)
    $("#header").animate({"height": "110px"}, 500)

});

这意味着每次我在表单中更改焦点时都会获得动画。我该如何改变？

Answer 1

嗯，我会找到所有输入元素并绑定它们，例如

$(function() {
    $( '#form_id' ).find('input').focus(function() {

        //your function

    });

  $( '#form_id' ).find('input').blur(function() {

        //your function

    });

});

Answer 2

尝试使用$（“：input”）（介意冒号）

焦点的相反事件是模糊，而非焦点

Answer 3

问题：

focus的倒数是blur。 unfocus取消绑定焦点处理程序。
你是绑定到表单元素，而它是表单中的元素（在jQuery中，这些元素可以在:input中找到）获得焦点。

最好的方法是使用delegate：

$('form').delegate(':input', 'focus', function() {
    $('#help').show();
}).delegate(':input', 'blur', function() {
    $('#help').hide();
});

这是处理此问题的最快方法。

See jsFiddle example

Answer 4

见focus()。它不打算与'form'元素一起使用，而是与input，textarea ......等一起使用

尝试

$("form input").focus(function(){...}).

JQuery：整个表单上的.focus（）事件？如何？

4 个答案: