焦点和模糊的jquery背景颜色变化
我有以下问题:我有一个带有三个文本输入字段的表单,我想在其中一个字段具有焦点时更改背景颜色,并在失去焦点时将其设置回。 我想出了以下代码:
HTML(简化):
jQuery的
$(document).ready(function() { $('input:text').focus( function(){ $(this).css({'background-color' : '#FFFFEEE'}); }); $('input:text').blur( function(){ $(this).css({'background-color' : '#DFD8D1'}); }); });
谢谢
#FFFFEEE
不是正确的颜色代码。 请尝试使用#FFFFEE
。
您尝试做的事情可以简化为此。
$('input:text').bind('focus blur', function() { $(this).toggleClass('red'); });
input{ background:#FFFFEE; } .red{ background-color:red; }
更简单,只需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; }
经测试的代码:
$("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
在代码中应该有昏迷“,”而不是冒号“:”
代码必须是$(this).css({'background-color' , '#FFFFEE'});
我希望它有所帮助。
对Saleha来说