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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python使用多线程不断刷新网页的方法
2015/03/31 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
利用python获取Ping结果示例代码
2017/07/06 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
库房主管岗位职责
2013/12/31 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
学生期末评语大全
2014/04/30 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
领导新年致辞2016
2015/07/29 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js