JQuery 文本框高亮显示插件

　　以前使用Mootools Js框架，文本框有个$('id').highlight()高亮方法，使其高亮显示，效果如下：

JQuery 中没有这个方法，自己今天写了一个Plugin，把代码贴出来分享一下；

代码如下：

jquery-highlight.js

/*description:TextBox HighLightauthor: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>

效果如下：

转载于:https://www.cnblogs.com/liulikui/archive/2011/04/01/JQuery-Plugin.html

总结

以上是生活随笔为你收集整理的JQuery 文本框高亮显示插件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。