Question

我的目标是将类“焦点”添加到我的表单元素，该元素在单击时具有类.search-form。并在模糊时删除它。

这是我的代码：

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

我做错了什么。它没有将类焦点添加到click上。

HTML：

<form name="quick_find" action="http://localhost/gostwear6/advanced_search_result.php" method="get" class="search search-form group global-search  blur">
    <input type="text" name="keywords" value="1884" size="50" class="search-input" tabindex="1"  placeholder="Search"   />
    <button class="search-submit" type="submit"><span class="search-submission-text">Search</span></button>
    <input type="hidden" name="search_in_description" value="1" />
    <input type="hidden" name="inc_subcat" value="1" />                             
</form>

Answer 1

您忘记了班级选择器前的.：

$('.search-form')

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

$('.search-form input')

Answer 2

你可以使用css伪类:focus

Answer 3

唯一缺少的是对班级的引用。

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

http://jsfiddle.net/afzaal_ahmad_zeeshan/pC9q4/1/

您的代码非常完美，而且运行正常！：）

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

return false;

查看单击按钮时会发生什么。

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

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

Answer 4

要定位表单，请使用focusout/focusin个事件（泡泡）：

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

默认情况下，FORM无法获得焦点，将属性tabindex添加到FORM：

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

对于样式，请使用：

.search-form {outline:0}

JsFiddle

Answer 5

试试这个。

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

在焦点上添加类以形成元素

5 个答案: