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 isArray 数组类型检测函数
Oct 08 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
详解JavaScript自定义函数
Jul 29 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实现ftp上传文件示例
2014/08/21 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python binascii 进制转换实例
2019/06/12 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
如何利用python生成MD5并去重
2020/12/07 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
参观考察邀请函范文
2014/01/29 职场文书
高中课程设置方案
2014/05/28 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
如何写新闻稿
2015/07/18 职场文书