javascript - change bordercolor onFocus - Stack Overflow

admin管理员组

文章数量:1277378

I tried to make script which changes color of border-bottom of div after having focus on

<input type="text">

and then changing back to default color after clicking somewhere else.

This is what i tried:

Css:

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

Javacript:

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

Html:

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

The first part (changing color on focus) works fine, however after clicking somewhere else (not having focus on input) it doesnt change back to normal style as set in css file.

any idea what im doing wrong?

I tried to make script which changes color of border-bottom of div after having focus on

<input type="text">

and then changing back to default color after clicking somewhere else.

This is what i tried:

Css:

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

Javacript:

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

Html:

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

The first part (changing color on focus) works fine, however after clicking somewhere else (not having focus on input) it doesnt change back to normal style as set in css file.

any idea what im doing wrong?

• javascript
• jquery

Share Improve this question Follow edited May 5, 2012 at 0:49 user1106352 asked Apr 29, 2012 at 17:18 user1207524user1207524 36922 gold badges1313 silver badges2929 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

I'd suggest:

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

JS Fiddle demo.

Though if you're amenable to CSS:

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

JS Fiddle demo.

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

You shold add a function to onBlur event to rollback your change

You have to use onBlur event.

JavaScript:

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

HTML:

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

However, the better option will be using class toggling.

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

instead of calling a function in html you can try this:

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

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

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

this happens because the changed css is not reverted after losing focus from control.

This would help:

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

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

You shouldn't be using JavaScript to do this. CSS has a :focus selector that is much more appropriate for this.

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

本文标签： javascriptchange bordercolor onFocusStack Overflow