javascript 更改边框/颜色 onFocus
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10374170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change border/color onFocus
提问by user1207524
I tried to make script which changes color of border-bottom of div after having focus on
我尝试制作脚本，在关注焦点后更改 div 边框底部的颜色
<input type="text">
and then changing back to default color after clicking somewhere else.
然后在单击其他地方后更改回默认颜色。
This is what i tried:
这是我试过的：
Css:
css：
.div1 {border-bottom:1px solid #ccc;}
Javacript:
Java脚本：
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.
第一部分（在焦点上改变颜色）工作正常，但是在点击其他地方（没有专注于输入）后，它不会变回 css 文件中设置的正常样式。
any idea what im doing wrong?
知道我做错了什么吗？
回答by David says reinstate Monica
I'd suggest:
我建议：
$('input').focus(
function(){
$(this).css('border-bottom','1px solid #000');
}).blur(
function(){
$(this).css('border-bottom','1px solid #ccc');
});?
Though if you're amenable to CSS:
但是，如果您适合 CSS：
input:focus,
input:active {
border-bottom: 1px solid #000;
}
回答by M Rostami
$('input').focus(function(){
$(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
$(this).css('border-bottom-color','#ccc');
});
回答by VisioN
You have to use onBlurevent.
你必须使用onBlur事件。
JavaScript:
JavaScript：
function inputBlur() {
$(".div1").css("border-bottom","1px solid #ccc");
}
HTML:
HTML：
<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">
However, the better option will be using class toggling.
但是，更好的选择是使用类切换。
HTML:
HTML：
<input type="text" class="myinput">
CSS:
CSS：
.myinput {
border-bottom:1px solid #ccc;
}
.myinput.active {
border-bottom:1px solid #ffba00;
}
JavaScript:
JavaScript：
$(function() {
$(".myinput").on("focus", function() {
$(this).addClass("active");
}).on("blur", function() {
$(this).removeClass("active");
});
});
回答by undefined
instead of calling a function in html you can try this:
你可以试试这个，而不是在 html 中调用函数：
.border {border-bottom:1px solid #ccc;}
$("input[type='text']").focus(function(){
$(this).addClass("border")
})
$("input[type='text']").blur(function(){
$(this).removeClass("border");
})
回答by Abhijeet Pawar
this happens because the changed css is not reverted after losing focus from control.
发生这种情况是因为在失去控制焦点后更改的 css 不会恢复。
This would help:
这将有助于：
<input type="text" onFocus="inputFocus();" onblur="inputBlur();">
function inputFocus(){ $(".div1").removeAttr('style'); };
回答by Abhijeet Pawar
You shouldn't be using JavaScript to do this. CSS has a :focusselector that is much more appropriate for this.
您不应该使用 JavaScript 来执行此操作。CSS 有一个:focus更适合于此的选择器。
.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}
回答by hkutluay
You shold add a function to onBlur event to rollback your change
您应该向 onBlur 事件添加一个函数来回滚您的更改
