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

时间:2011-03-22 21:13:21

标签: jquery input background-color

我有以下问题:我有一个带有三个文本输入字段的表单,我希望在其中一个字段具有焦点时更改背景颜色,并在失去焦点时将其设置回。我想出了以下代码:

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'});
    });
});

由于

5 个答案:

答案 0 :(得分:16)

#FFFFEEE不是正确的颜色代码。请尝试使用#FFFFEE

答案 1 :(得分:14)

您要做的事情可以简化为此。

$('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 :(得分:6)

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

答案 3 :(得分:0)

经过测试的代码:

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

答案 4 :(得分:-2)

在代码中应该有昏迷“,”而不是冒号“:”

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

我希望它有所帮助。

问候 Saleha