Question

我试图检查输入是否有焦点为背景添加颜色然而当我移除鼠标并专注于另一个输入时，它不再移除焦点它实际上保持着焦点！如何从第一个中移除背景！

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");
    });
});

如果您可以为我测试一下，或者让我知道上述代码出了什么问题，我会尽快回复它吗？

Answer 1

您可以使用 .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");        
    });
});

Answer 2

更好的方法是使用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");
});

Answer 3

你可以检查一下焦点上是否存在类，然后在焦点上执行相同的操作。

 $(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.
    }
});

});

使用Jquery关注输入并移除焦点

3 个答案: