欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-10-11 09:50:01|栏目: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>

效果如下:

上一篇:jQuery实现的输入框选择时间插件用法实例

栏    目:jquery

下一篇:jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】

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

本文地址:http://www.codeinn.net/misctech/179551.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有