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 的 prototype问题。
Jan 03 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 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
php流量统计功能的实现代码
2012/09/29 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python 实现堆排序算法代码
2012/06/05 Python
python人人网登录应用实例
2014/09/26 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python实现linux下抓包并存库功能
2018/07/18 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python如何实现爬取B站视频
2020/05/20 Python
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
技校毕业生个人学习的自我评价
2014/02/21 职场文书
授权委托书公证
2014/09/14 职场文书
医生见习报告范文
2014/11/03 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
python编写五子棋游戏
2021/05/25 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技