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 相关文章推荐
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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生成圆角图片的方法
2015/04/07 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP调用其他文件中的类
2018/04/02 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
AngularJs Understanding the Controller Component
2016/09/02 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python中函数的用法实例教程
2014/09/08 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
python Gabor滤波器讲解
2020/10/26 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
交通安全演讲稿
2014/01/07 职场文书
茶叶生产计划书
2014/01/10 职场文书
班级德育工作实施方案
2014/02/21 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
家长会欢迎词
2015/01/23 职场文书
2015公司年度工作总结
2015/05/14 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
搭建Yolov5服务器
2022/04/30 Servers