Question

我试着制作脚本，在专注于

之后改变div的border-bottom的颜色

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

Answer 4

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

Answer 5

您必须使用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");
    });
});

Answer 6

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

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

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

$("input[type='text']").blur(function(){
   $(this).removeClass("border");
})

Answer 7

发生这种情况是因为在从控件中失去焦点后，未更改的css也未恢复。

这会有所帮助：

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

function inputFocus(){ $(".div1").removeAttr('style'); };

更改边框/颜色onFocus

7 个答案: