使用Jquery聚焦输入并移除聚焦

4

我正在尝试检查输入框是否具有焦点,以便在其背景上添加颜色。然而,当我移除鼠标并将焦点放在另一个输入框上时,它不再删除原来的焦点,而是继续保持着!我该如何从第一个输入框中移除背景颜色!

Fullname: <input type="text" name="name"><br>
Email: <input type="text" name="email">

如何检查类测试是否存在

我正在尝试以下if语句,但出现了问题。可能是我的代码有问题,但我无法找出原因!

$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#f4fcef");
    });
});

我希望你能为我测试一下,或者让我知道上面的代码出了什么问题!
3个回答

6
你可以使用.blur方法。
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#f4fcef");
    });
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});

或者,您可以为html代码的每个部分添加类名:
Name: <input class="name" type="text" name="fullname"><br>
Email: <input class="email" type="text" name="email">

使用以下 JQuery 代码来运行它。
$(document).ready(function(){
    $(".name").focus(function(){
        $(this).css("background-color", "#f4fcef");
        $(".email").css("background-color", "#ffffff");        
    });
    $(".email").focus(function(){
        $(this).css("background-color", "#f4fcef");
        $(".name").css("background-color", "#ffffff");        
    });
});

1
我会使用“.blur”,因为它更相关于这个问题!但是回答很好! - DirWolf

1
更好的方式是使用CSS:

input:focus {
    background-color: yellow;
}

但使用jQuery:
$('input[type="text"]').focus(function() {
    $(this).css("background-color", "#cccccc");
});

$('input[type="text"]').blur(function() {
    $(this).css("background-color", "#fff");
});

0

你可以检查如果类存在于焦点上,那么在焦点离开时执行一些操作。

 $(document).ready(function(){
$("input").focus(function(){
    if($(this).hasClass("yourclassName")){
     $(this).css("background-color", "#f4fcef");
    }

}).focusout(function(){
   if($(this).hasClass("yourclassName")){
     $(this).css("background-color", "#f4fcef");//some other color.
    }
});

});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接