Jquery 将焦点上的类添加到表单元素

我的目标是将类“焦点”添加到包含该类的表单元素中。单击搜索表单。然后在模糊中移除它

这是我的密码：

$('search-form').on('blur', function(){
   $(this).removeClass('focus');
}).on('focus', function(){
  $(this).addClass('focus');
}); 

我做错了什么。它不是在单击上添加类焦点

Html:

搜寻

您忘记了类选择器前面的

：

$('.search-form')

此外，这是表单类，而不是输入。试试这个：

$('.search-form input')

---

您可以使用css伪类

：focus

唯一缺少的是对类的引用

$('.search-form').focus(...

您的代码是完美的，而且运行良好！：）

刚刚试过你的代码，嘿！你把它作为一个提交按钮。这将强制浏览器加载页面并提交表单。你可以尝试使用

return false; 

查看单击按钮时发生的情况

之后，更改代码以访问按钮。您的代码是一个提交按钮，所以请尝试访问它并更改其类。代码如下：

$('.search-form button').on('blur', function(){
   $(this).removeClass('focus');
}).on('focus', function(){
   $(this).addClass('focus');
}).on('click', function () {
   return false;
}); 

---

要以表单为目标，请改用

focusout/focusin

事件（哪个气泡）：

由于默认情况下表单无法获取焦点，请将属性tabindex添加到表单：

<form tabindex="-1" name="quick_find" ...>

试试这个

           $(".search-form form:first").blur(function(){
             $(this).removeClass("focus");
            }).focus(function(){
             $(this).addClass("focus");
            }); 

---

我也试过了。还有。之前。焦点仍然没有work@Sackling聚焦前不需要点，只需在选择器上。@Sackling，您的目标是表单，而不是输入。啊，好的。。我需要的是针对输入。我认为表单足够好吗？@Sackling不幸的是，不，你真的必须清楚，但是如果你想用css中的伪类指定表单，你可以使用

。搜索表单：focus

（带空格）。发布你的html代码。

<form tabindex="-1" name="quick_find" ...>

.search-form {outline:0}

           $(".search-form form:first").blur(function(){
             $(this).removeClass("focus");
            }).focus(function(){
             $(this).addClass("focus");
            });