jQuery jquery焦点输入/输出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4787114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery focus in / out
提问by somewhereInPHP
I would like is to add class "active" to input on input focus, and when focus off, remove that class.
我想在输入焦点上添加类“活动”，当焦点关闭时，删除该类。
Thank's
谢谢
回答by Michael Glass
once you've included the jquery lib, it's pretty standard
一旦你包含了 jquery 库，它就非常标准了
$('input').focus( function() {
$(this).addClass('active');
});
$('input').blur( function() {
$(this).removeClass('active');
});
focus and blur are more appropriate than focusin and focusout for just input focusing. focusin and focusout bubble events to children objects and for the most part, that's (likely) unnecessary here.
对于仅输入聚焦，focus 和 blur 比 focusin 和 focusout 更合适。focusin 和 focusout 气泡事件到子对象，并且在大多数情况下，这（可能）在这里是不必要的。
pretty standard stuff. take a look at the jquery docs for more. also maybe modify the selector (the 'input' part) if you only want it for particular input fields.
很标准的东西。查看 jquery 文档了解更多信息。如果您只需要特定输入字段，也可以修改选择器（“输入”部分）。
selector examples:
选择器示例：
$('input#my_id_is_bob') for $('input.my_class_is_activatable') for
$('input#my_id_is_bob') 为 $('input.my_class_is_activatable') 为
回答by ozarius
If target-id is the id of the input on which you want to swap the class in and out, you could use something like this:
如果 target-id 是您要在其上交换类的输入的 ID，则可以使用以下内容：
$('#target-id').focusin(
function(){
$(this).addClass('active');
}).focusout(
function(){
$(this).removeClass('active');
});
回答by Frederik Kammer
$("#id-of-your-field").focusin(function() {
$('#id-of-your-field').addClass("active");
});
$("#id-of-your-field").focusout(function() {
$('#id-of-your-field').removeClass("active");
});
This would solve your problem
这将解决您的问题
回答by Phil.Wheeler
Try the following.
请尝试以下操作。
$("input[type=text]").focus(function(){
$(this).addClass("active");
}).focusOut(function(){
$(this).removeClass("active");
});
回答by honk31
jQuery on()would look like this:
jQuery on()看起来像这样：
$('input').on("focus", function() {
$(this).addClass('active');
}).on("blur", function() {
$(this).removeClass('active');
});
or extra extra short:
或额外的额外短：
$('input').on("focus blur", function() {
$(this).toggleClass('active');
});
alternatives for focus & blur are "focusin" and "focusout" but are bubbling events as Michael Glass pointed out.
焦点和模糊的替代方案是“focusin”和“focusout”，但正如迈克尔格拉斯指出的那样，是冒泡事件。
The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).
当元素或其中的任何元素获得焦点时，focusin 事件将发送到该元素。这与焦点事件的不同之处在于它支持检测父元素上的焦点事件（换句话说，它支持事件冒泡）。
回答by Raja Khoury
You can attach event handlers using the .bind()or better the .on()method then check for the event.type
您可以使用.bind()或更好的.on()方法附加事件处理程序，然后检查event.type
$(element).bind("focus blur", function(event){
event.stopPropagation();
if(event.type == "focus")
{
// Input focused/clicked
$(element).addClass('active');
}
else if(event.type == "blur")
{
// Lost focus
$(element).removeClass('active');
}
});
回答by Youssef
Or better try to use this:
或者更好地尝试使用这个：
$('input[type="text"]').focus(function() {
$(this).addClass("active");
}).blur(function() {
$(this).removeClass("active");
});
回答by Aleksandr Skobeltcyn
More usefull code if you use input elements, like 'Share forms' and use button 'Send message' or something than does't hide forms :
如果您使用输入元素，例如“共享表单”并使用按钮“发送消息”或不隐藏表单的其他内容，则代码更有用：
$(function() {
$("html").click(function(e) {
if (e.target.id == "your_id_element") {
$('#your_id_elements').addClass('open');
} else if($(e.target).closest('.some_div_without_reaction').length == 0) {
if($('#your_id_element').hasClass('open') && $('#your_id_element').val()==''){
$('#your_id_element').removeClass('open');
}
}
});
})
回答by Bhavya
You probably want something like $(this).attr('class','active');in your focusinand $(this).attr('class','');in your focusout.
您可能希望$(this).attr('class','active');在您的focusin和$(this).attr('class','');在您的focusout.
回答by nunopolonia
You can use jQuery's focusand blurfunctions
您可以使用 jQueryfocus和blur函数
$('input[type="text"]').focus(function() {
$(this).addClass("active");
});
$('input[type="text"]').blur(function() {
$(this).removeClass("active");
});
