JavaScript - 获取hasClass（）与jQuery的当前焦点元素

我知道这只是一个简单的问题，但在这里我很难解决我自己的问题。JavaScript - 获取hasClass（）与jQuery的当前焦点元素

就我而言，我有几个文本字段，当字段本身聚焦时，它会更改字段边框和标签文本的颜色，并在未聚焦时恢复更改。于是我用下面的代码：（见我demo）

$(function() { 
    $(".field").focus(function() { /* ... */ }); 
    $(".field").blur(function() { /* ... */ }); 
});

但因为我指着类.field，有这个类将受到影响，因此所有的元素，我想我必须设置当前活动元素与类.field所以其他元素将被排除。我用下面的代码，但它不工作（我甚至不知道我是不是说得对的想法）：

var current = $(document.activeElement).hasClass(".field"); 
$(current).focus(function() { /* ... */ }); 
$(current).blur(function() { /* ... */ });

如果有另一种方式来解决这个请告诉我如何。

希望你能帮助我。

感谢。

来源

2016-08-20 Chain Trap

删除css或将类添加到除当前元素之外的元素的焦点上，您可以通过'：not'，'$（'。field'）。not（current）.addClass ...'来实现此操作。' –

您可以将$（“。field”）选择器更新为$（this）以选择字段并$（this）.next（）在blur和focus函数中选择该字段的标签。只有所选字段和下一个标签将被选中，看到这个片段：

$(function() { 
 
    $(".field").focus(function() { 
 
    /* when field with or without value is focused, add these classes */ 
 
    if ($(this).val().length || $(".field").val().length == "") { 
 
     $(this).addClass("field-is-focused"); 
 
     $(this).next().addClass("label-is-focused"); 
 
    } 
 
    }); 
 
    $(".field").blur(function() { 
 
    /* when field with or without value is not focused, remove added classes */ 
 
    if ($(this).val().length || $(".field").val().length == "") { 
 
     $(this).removeClass("field-is-focused"); 
 
     $(this).next().removeClass("label-is-focused"); 
 
    } 
 
    }); 
 
});

fieldset { 
 
    border: 2px solid #ccc; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
} 
 
.label { 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 
.field { 
 
    border: 2px solid #ccc; 
 
    padding: 0 5px; 
 
    height: 22px; 
 
    margin-bottom: 10px; 
 
} 
 
.field:focus { 
 
    outline: 0; 
 
    outline-offset: 0; 
 
} 
 

 
/*---------------------------------*/ 
 

 
.field-is-focused { 
 
    border-color: blue; 
 
} 
 
.label-is-focused { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width"/> 
 
\t <title>jQuery - Get current focused element</title> 
 
     <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
\t <form> 
 
\t <fieldset> 
 
\t \t <!-- input email type field --> 
 
\t \t <input type="email" class="field"> 
 
\t \t <label class="label">Email</label> 
 

 
\t \t <!-- input password type field --> 
 
\t \t <input type="password" class="field"> 
 
\t \t <label class="label">Password</label> 
 
\t \t 
 
\t \t <!-- textarea field --> 
 
\t \t <textarea class="field"></textarea> 
 
\t \t <label class="label">Comment</label> 
 
\t </fieldset> 
 
\t </form> 
 
    </body> 
 
</html>

来源

2016-08-20 10:07:21 Calum

This不会改变标签颜色 –

非常感谢！ –

@ edison1337是的，我也注意到了。不知道它如何也改变焦点... –

尝试使用CSS重点为PROPERT类点域。

.field :focus{ 
/*your style change*/ 
}

这可能会消除焦点/模糊事件函数。希望这有助于！

来源

2016-08-20 10:15:56 bhattshru

但是由于HTML5验证，我必须使用JS来处理它。 –

JavaScript - 获取hasClass（）与jQuery的当前焦点元素

回答

相关问题