JQuery文本框高亮显示插件代码

219 阅读 0 评论 145 点赞

我是靠谱客的博主激昂小丸子，这篇文章主要介绍JQuery文本框高亮显示插件代码，现在分享给大家，希望可以做个参考。

代码如下：

jquery-highlight.js

复制代码代码如下:

 
/* 
description:TextBox HighLight 
author:Allen Liu 
*/ 
(function($) { 
$.fn.highlight = function(options) { 
var defaultOpt = { 
lightColor: 'yellow', /* 高亮时的颜色 */ 
lightTime: 1000, /* 高亮时长 （单位：毫秒） */ 
isFocus: true /* 是否获取焦点 */ 
}; 

options = $.extend(defaultOpt, options); 
return this.each(function() { 
var sender = $(this); 
if (sender.attr('light') == undefined) { 
var _bgColor = sender.css('background-color'); 
sender.css({ 'background-color': options.lightColor }); 
if (options.isFocus) { 
sender.focus(); 
} 

sender.attr('light', true); 
window.setTimeout(function() { 
sender.removeAttr('light'); 
sender.css({ 'background-color': _bgColor }); 
}, options.lightTime); 
} 
}); 
} 
})(jQuery); 

Html代码：

复制代码代码如下:

 
<input type="text" id="txtBox" /> 
<input type="password" id="txtPwd" /> 
<input type="button" id="btnHighLight" value="highlight" /> 

调用方法：

复制代码代码如下:

 
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery-highlight.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#btnHighLight').click(function() { 
$('#txtBox').highlight({lightColor:'red', lightTime: 1000 }); 
$('#txtPwd').highlight({ lightTime: 1000 }); 
}); 
}); 
</script> 

效果如下：