jquery背景颜色在焦点和模糊上的变化

我有以下问题：我有一个表单有三个文本输入字段，我想在其中一个字段有焦点时更改背景色，并在失去焦点时将其设置回原色。我想出了以下代码：

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>

$("input").css("background","red");

$('input:text').focus(function () {
    $(this).css({ 'background': 'Black' });
});

$('input:text').blur(function () {
    $(this).css({ 'background': 'red' });
});

---

谢谢

#ffffee

不是正确的颜色代码。尝试使用

#FFFFEE

。

您尝试的操作可以简化为以下内容

$（'input:text'）.bind（'focus blur'，function（）{
$（this.toggleClass（'red'）；
});
输入{
背景：#FFFFEE；
}
瑞德先生{
背景色：红色；
}
更简单的是，只要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;
}

在代码中应该有coma“，”而不是冒号“：”

代码必须是
$（this）.css（{'background-color'，'#ffee'}）

我希望有帮助

问候
Saleha测试代码：

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

$("input").css("background","red");

$('input:text').focus(function () {
    $(this).css({ 'background': 'Black' });
});

$('input:text').blur(function () {
    $(this).css({ 'background': 'red' });
});

完成：

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

$("input").css("background","red");

$('input:text').focus(function () {
    $(this).css({ 'background': 'Black' });
});

$('input:text').blur(function () {
    $(this).css({ 'background': 'red' });
});

在版本中测试：


jquery-1.9.1.js

jquery-ui-1.10.3.js
您尚未描述执行此代码时发生的情况。到底是什么问题？你没有说你的代码有什么问题。很抱歉，我还没有打算发送它。问题是模糊有效，而焦点无效。@Argo：这是因为您在焦点事件处理程序的背景色样式中添加了非法值。这并没有提供问题的答案。若要评论或要求作者澄清，请在他们的帖子下方留下评论-你可以随时在自己的帖子上发表评论，一旦你有足够的评论，你就可以发表评论了。谢谢Neji。我确实为我的工作构建了js框架。昨天我也有类似的问题。当我在谷歌看到这个页面的第一个结果是我的问题时，我想我在这里的解决方案是其他有类似问题的程序员，可以很容易得到解决方案。我的问题是：运行焦点事件时无法使用jquery更改“输入：文本”背景色。