jquery背景颜色改变焦点和模糊

Posted 2023-02-21

【中文标题】jquery背景颜色改变焦点和模糊

【英文标题】：jquery background-color change on focus and blur

【发布时间】：2011-07-20 20:29:14

【问题描述】：

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

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

$(document).ready(function() 
    $('input:text').focus(
    function()
        $(this).css('background-color' : '#FFFFEEE');
    );

    $('input:text').blur(
    function()
        $(this).css('background-color' : '#DFD8D1');
    );
);

谢谢

【问题讨论】：

您还没有描述执行此代码时发生的情况。究竟是什么问题？

你没有说你想出的代码有什么问题。

【参考方案1】：

您尝试做的事情可以简化为这一点。

$('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>

【参考方案2】：

测试代码：

$("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

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。

感谢内吉。我确实为我的工作构建了 js 框架。昨天我有类似的问题。当我看到这个页面首先导致我在谷歌的问题时，我想我的解决方案在这里其他有类似问题的程序员可以很容易地得到解决方案。我的问题是：运行焦点事件时无法使用 jquery 更改“输入：文本”背景颜色。

【参考方案3】：

代码中应该有逗号","不是冒号":"

代码必须是$(this).css('background-color' , '#FFFFEE');

希望对你有帮助。

问候 萨利哈

【参考方案4】：

更简单，只需 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;

【参考方案5】：

#FFFFEEE 不是正确的颜色代码。请改用#FFFFEE。

【讨论】：

对不起，我还没有打算发送它。问题是模糊有效，焦点无效。

@Argo：那是因为您在焦点事件处理程序的背景颜色样式中设置了非法值。