Html onfocus 时如何更改文本框的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15975078/
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
How do i change Background color of textbox when onfocus?
提问by Mariraj Sankar
i tried this code but its not working.. when i on-focus textbox it shows error
我试过这段代码，但它不起作用..当我聚焦文本框时，它显示错误
function ChangeBgColor(obj, evt)
{
if(evt.type=="focus")
style.background ="lightgrey";
else if(evt.type=="blur")
{
style.background="white";
}
}
回答by Fabrizio Calderan
JavaScript is not necessary for this task, just use css (:focusis supported since IE8)
此任务不需要 JavaScript，只需使用 css（:focus自 IE8 起支持）
https://developer.mozilla.org/en-US/docs/CSS/:focus
https://developer.mozilla.org/en-US/docs/CSS/:focus
input { background: lightgray; }
input:focus { background: white; }
Only if this effect is absolutely needed also on < IE8then JS (properly wrapped in a conditional comment) can be used, but even in this scenario it is recommended to keep off style from logic: e.g.
只有在绝对需要这种效果< IE8的情况下，才可以使用 JS（正确包装在条件注释中），但即使在这种情况下，也建议将样式与逻辑分开：例如
function ChangeBgColor(obj, evt) {
obj.className = (evt.type === "focus") ? "focus" : "";
}
and use this style
并使用这种风格
input { background: lightgray; }
input:focus,
input.focus { background: white; }
回答by Mooseman
obj.style.background = "#C8C8C8";
obj.style.background = "#C8C8C8";
回答by epascarello
What is style? You have not defined it anywhere in your code above:
什么是style？您没有在上面的代码中的任何地方定义它：
function ChangeBgColor(obj, evt)
{
if(evt.type=="focus")
style.background ="lightgrey"; //<--what is style?
else if(evt.type=="blur")
{
style.background="white";
}
}
I am guessing that you wanted something like
我猜你想要类似的东西
obj.style.background ="lightgrey";
And in the code above, simplified
在上面的代码中，简化了
function ChangeBgColor(obj, evt)
{
obj.style.background = (evt.type=="focus") ? "lightgrey" : "white";
}
The best answer is to use pure CSS.
最好的答案是使用纯 CSS。
回答by Tung Nguyen
Yep, you should try this javascript code to change the background color for this element:
是的，你应该试试这个 javascript 代码来改变这个元素的背景颜色：
var obj = document.getElementById("yourId");
obj.onfocus = function() {
obj.style.backgroundColor = 'red';
}
var obj = document.getElementById("yourId");
obj.onfocus = function() {
obj.style.backgroundColor = 'red';
}
Now you can change whatever color you want
现在你可以改变你想要的任何颜色
回答by Ivo Pereira
Try doing it with jQuery.
尝试用 jQuery 来做。
$('#div').on('focus', function() {
$(this).css({background:'blue'});
});
