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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js动态为代码着色显示行号
May 29 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
桌面中心(四)数据显示
2006/10/09 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
python调用API实现智能回复机器人
2018/04/10 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
士力架广告词
2014/03/20 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
检讨书范文300字
2015/01/28 职场文书
护理心得体会范文
2016/01/22 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Feign调用传输文件异常的解决
2021/06/24 Java/Android