Question

我是jQuery的新手，在使用jQuery css属性时，我发现输入框在焦点/模糊时的奇怪行为。

我的代码就像这样

<body>

    Enter something <input type="text" id="text" />

<script>
    $(document).ready(function(){

    $("#text").focus(function(){
                $("#text").css("border","5px");
            } );

            $("#text").blur(function(){
                $("#text").css("border-color","#555");
            } );

    } );

    </script>
</body>

它在模糊方面变得最糟糕，因为整个输入框从那里消失了。我尝试了解jQuery API文档和其他一些来源，但没有找到任何结果。如果我做错了，请告诉我，谢谢你。

Answer 1

这项工作 - - Fiddle

$(document).ready(function () {

    $("#text").focus(function () {
        $("#text").css("border", "5px solid black");
    });

    $("#text").blur(function () {
        $("#text").css("border", "1px solid red");
    });

});

Answer 2

$("#text").focus(function(){
   $("#text").css("border","5px solid");
                                  ^  should be set
});

这里是jsiddle

Answer 3

Fiddle - 您的焦点事件应该只指定您想要更改的属性。

$("#text").css("border-width","5px");

这实际上是一个css问题，而不是jquery。既然你刚刚指定了border（这是一个css简写属性）并且只给了它一个参数，你就覆盖了用css构建的浏览器。

jquery在输入框焦点/模糊上的奇怪行为

3 个答案: