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 动态添加表格行
Jun 22 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
js实现索引图片切换效果
Nov 21 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
React路由鉴权的实现方法
Sep 05 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中的escape函数
2013/06/29 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
django框架中间件原理与用法详解
2019/12/10 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
详解Python高阶函数
2020/08/15 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
暑假安全教育广播稿
2014/09/10 职场文书
学生偷窃检讨书
2014/09/25 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2015年电教工作总结
2015/05/26 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书