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实用技巧(一)
Aug 16 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js子页面获取父页面数据示例
May 15 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
Javascript中的arguments对象
Jun 20 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
JavaScript实现简单拖拽效果
Sep 15 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断点续传之如何分割合并文件
2014/03/22 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python中enumerate函数代码解析
2017/10/31 Python
实例讲解python中的序列化知识点
2018/10/08 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
Linux操作面试题
2015/02/11 面试题
大学生四个方面的自我评价
2013/09/19 职场文书
大学生社团活动总结
2014/04/26 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年幼师工作总结
2014/11/22 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫