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


Posted in Javascript onApril 02, 2011

代码如下:

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文本框高亮显示插件代码
Javascript 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 #Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 #Javascript
按钮JS复制文本框和表格的代码
Apr 01 #Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 #Javascript
Javascript 面试题随笔
Mar 31 #Javascript
IE6 fixed的完美解决方案
Mar 31 #Javascript
HTML DOM的nodeType值介绍
Mar 31 #Javascript
You might like
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python中list常用操作实例详解
2015/06/03 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python多继承原理与用法示例
2018/08/23 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
Sony C++笔试题
2013/03/10 面试题
大学生个人推荐信范文
2013/11/25 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL