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中switch语句的用法详解
Jun 03 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue最新防抖方案(必看篇)
Oct 30 Javascript
js消除图片小游戏代码
Dec 11 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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
php4的session功能评述(三)
2006/10/09 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python输入二维数组方法
2018/04/13 Python
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
大数据分析用java还是Python
2020/07/06 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
Python如何实现单例模式
2016/06/03 面试题
咨询公司各岗位职责
2013/12/02 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
大学新闻系求职信
2014/06/03 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python