收藏此话题 用 jQuery 实现的输入框聚焦的样式

原文：http://www.oschina.net/discuss/thread/2348?lp=3

JavaScript代码：

$(document).ready(function() { var input_111s = $('input.focusEnable'); input_111s.addClass("idleField"); input_111s.focus(function() { $(this).removeClass("idleField").addClass("focusField"); if (this.value == this.defaultValue){ this.value = ''; } if(this.value != this.defaultValue){ this.select(); } }); input_111s.blur(function() { $(this).removeClass("focusField").addClass("idleField"); if ($.trim(this.value) == ''){ this.value = (this.defaultValue ? this.defaultValue : ''); } }); });

 

然后设置输入框获取焦点后的样式，以及失去焦点的样式如下：

 

.focusField{ border:solid 1px #73A6FF; background:#FFC; color:#000; } .idleField{ background:#FFF; color: #6F6F6F; border: solid 1px #DFDFDF; }

 

搞定，其中 focus 是表示输入框获得焦点的事件触发，blur 是失去焦点的事件触发。

演示地址：

http://buildinternet.com/live/jqueryform/jqueryform1.php