jquery 背景颜色在焦点和模糊上的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5397911/
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
jquery background-color change on focus and blur
提问by Argoron
I have the following problem: I have a form with three text input fields, and I want to change the background-color when one of the fields has focus, and get it set back when it loses focus. I have come up with the following code:
我有以下问题：我有一个包含三个文本输入字段的表单，我想在其中一个字段获得焦点时更改背景颜色，并在失去焦点时将其设置回来。我想出了以下代码：
HTML (simplified):
HTML（简化）：
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>
jQuery
jQuery
$(document).ready(function() {
$('input:text').focus(
function(){
$(this).css({'background-color' : '#FFFFEEE'});
});
$('input:text').blur(
function(){
$(this).css({'background-color' : '#DFD8D1'});
});
});
Thanks
谢谢
采纳答案by Guffa
#FFFFEEEis not a correct color code. Try with #FFFFEEinstead.
#FFFFEEE不是正确的颜色代码。试试吧#FFFFEE。
回答by Hussein
What you are trying to do can be simplified down to this.
您尝试做的事情可以简化为这一点。
$('input:text').bind('focus blur', function() {
$(this).toggleClass('red');
});input{
background:#FFFFEE;
}
.red{
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>回答by JL Garcia
Even easier, just CSS can resolve the problem:
更简单的是，CSS 就可以解决这个问题：
input[type="text"], input[type="password"], textarea, select {
width: 200px;
border: 1px solid;
border-color: #C0C0C0 #E4E4E4 #E4E4E4 #C0C0C0;
background: #FFF;
padding: 8px 5px;
font: 16px Arial, Tahoma, Helvetica, sans-serif;
-moz-box-shadow: 0 0 5px #C0C0C0;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 5px #C0C0C0;
-webkit-border-radius: 5px;
box-shadow: 0 0 5px #C0C0C0;
border-radius: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
border-color: #B6D5F7 #B6D5F7 #B6D5F7 #B6D5F7;
outline: none;
-moz-box-shadow: 0 0 10px #B6D5F7;
-webkit-box-shadow: 0 0 10px #B6D5F7;
box-shadow: 0 0 10px #B6D5F7;
}
回答by Amin Ghaderi
Tested Code:
测试代码：
$("input").css("background","red");
Complete:
完全的：
$('input:text').focus(function () {
$(this).css({ 'background': 'Black' });
});
$('input:text').blur(function () {
$(this).css({ 'background': 'red' });
});
Tested in version:
jquery-1.9.1.js
jquery-ui-1.10.3.js
测试版本：
jquery-1.9.1.js
jquery-ui-1.10.3.js
回答by Saleha
in code there should be coma"," not colon ":"
在代码中应该有昏迷“，”而不是冒号“：”
the code must be $(this).css({'background-color' , '#FFFFEE'});
代码必须是 $(this).css({'background-color' , '#FFFFEE'});
i hope it helps.
我希望它有帮助。
regards Saleha
问候萨利哈
