更改边框/颜色onFocus

Question

我尝试做脚本，改变颜色的边框-底部的div后，有重点

<input type="text">

然后在单击其他位置后更改回默认颜色。

这是我尝试过的：

Css：

.div1 {border-bottom:1px solid #ccc;}

Javacript：

function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };

Html：

<input type="text" onFocus="inputFocus();">

第一部分(改变焦点的颜色)可以正常工作，但是在单击其他地方(没有焦点在输入上)之后，它不会像css文件中设置的那样改变回正常的样式。

你知道我做错了什么吗？

Answer 1

我建议：

$('input').focus(
    function(){
        $(this).css('border-bottom','1px solid #000');
    }).blur(
        function(){
            $(this).css('border-bottom','1px solid #ccc');
        });​

JS Fiddle demo。

不过，如果你愿意接受CSS的话：

input:focus,
input:active {
    border-bottom: 1px solid #000;
}

JS Fiddle demo。

Answer 2

$('input').focus(function(){
    $(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
    $(this).css('border-bottom-color','#ccc');
});

Answer 3

你不应该使用JavaScript来做这件事。CSS有一个更适合这方面的:focus选择器。

.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}