jquery background-color change on focus and blur

我有以下问题：我有一个带有三个文本输入字段的表单，并且当其中一个字段具有焦点并且让它回退时我想更改背景颜色当它失去焦点时。我想出了下面的代码：jquery background-color change on focus and blur

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

感谢

来源

2011-03-22 Argoron

您还没有描述执行此代码时发生了什么。究竟是什么问题？ – Greg 2011-03-22 21:16:35

你没有说出你使用的代码有什么问题。 – 2011-03-22 21:17:10

#FFFFEEE不是一个正确的颜色代码。改为使用#FFFFEE。

来源

2011-03-22 21:20:39 Guffa

好眼睛。我看到了#FFFFEE。 – Greg 2011-03-22 21:22:25

对不起，我不打算发送它。问题在于模糊效果，焦点没有。 – Argoron 2011-03-22 21:31:15

@Argo：这是因为您在焦点事件处理程序中将非法值置于背景颜色样式中。 – Guffa 2011-03-22 21:36:02

你想要做的事情可以简化到这个。

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

来源

2011-03-22 21:26:56 Hussein

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

来源

2011-03-23 12:07:47

一个问题伪类：焦点不适用于IE 6,7 – WooCaSh 2011-06-27 10:23:37

-2

代码应该有昏迷 “” 没有冒号 “：”

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

我希望它有帮助。

问候 Saleha

来源

2012-06-08 09:50:06 Saleha

测试的代码：

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

来源

2013-09-17 09:20:41

这不提供问题的答案。要批评或要求作者澄清，在他们的帖子下留下评论 - 你总是可以评论你自己的帖子，一旦你有足够的[声誉]（http://stackoverflow.com/help/whats-reputation），你会能够[评论任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – Neji 2013-09-17 09:43:00

感谢Neji。我确实为我的工作建立了js框架。昨天我有类似的问题。当我看到这个页面有第一个结果我的问题在谷歌，我想但我的解决方案在这里，其他程序员有类似的问题，可以很容易地得到解决方案。我的问题是：在运行焦点事件时，无法使用jquery更改'input：text'背景颜色。 – 2013-09-18 06:05:26

jquery background-color change on focus and blur

回答

相关问题