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 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 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
论坛头像随机变换代码
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
MySQL数据源表结构图示
2008/06/05 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python列表解析配合if else的方法
2018/06/23 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python实现视频读取和转化图片
2019/12/10 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
教师演讲稿大全
2014/05/16 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android