3

我试图制作脚本，在专注于之后改变 div 边框底部的颜色

<input type="text">

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

这是我尝试过的：

CSS：

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

Java脚本：

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

html:

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

第一部分（在焦点上更改颜色）工作正常，但是在单击其他地方（不关注输入）后，它不会变回 css 文件中设置的正常样式。

知道我做错了什么吗？

4

7 回答 7

2

我建议：

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

JS 小提琴演示。

虽然如果你愿意使用 CSS：

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

JS 小提琴演示。

于 2012-04-29T17:20:25.560 回答
1 
$('input').focus(function(){
    $(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
    $(this).css('border-bottom-color','#ccc');
});
于 2012-04-29T17:24:20.117 回答
0

您不应该使用 JavaScript 来执行此操作。CSS 有一个:focus更适合于此的选择器。

.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}
于 2012-04-29T17:21:04.460 回答
0

您应该向 onBlur 事件添加一个函数来回滚您的更改

于 2012-04-29T17:21:10.447 回答
0

你必须使用onBlur事件。

JavaScript：

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

HTML：

<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">

但是，更好的选择是使用类切换。

HTML：

<input type="text" class="myinput">

CSS：

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

.myinput.active {
    border-bottom:1px solid #ffba00;
}

JavaScript：

$(function() {
    $(".myinput").on("focus", function() {
        $(this).addClass("active");
    }).on("blur", function() {
        $(this).removeClass("active");
    });
});
于 2012-04-29T17:24:44.843 回答
0

而不是在 html 中调用函数，你可以试试这个： 

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

$("input[type='text']").focus(function(){
    $(this).addClass("border")
})

$("input[type='text']").blur(function(){
   $(this).removeClass("border");
})
于 2012-04-29T17:24:52.707 回答
0

发生这种情况是因为在失去控制焦点后更改的 css 没有恢复。

这将有助于：

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

function inputFocus(){ $(".div1").removeAttr('style'); };
于 2012-04-29T17:25:33.360 回答