代码如下： 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> 效果如下：

　　推荐阅读

　　jQuery中绑定事件的命名空间详解

在没有看到这篇 文章之前，我一直不知道原来bind也可以有命名空间。事实上，我看完这篇文章后，再去翻了一下手册，也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深究，或许他认为命名空间>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/24741.html

 1/2    1