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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JavaScript实现筛选数组
Mar 02 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
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
JS之小练习代码
2008/10/12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
js实现select下拉框选择
2020/01/11 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python实现微信远程控制电脑
2018/02/22 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
利用python开发app实战的方法
2019/07/09 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
财务主管的岗位职责
2013/12/30 职场文书
校庆口号
2014/06/20 职场文书
委托书范本
2014/09/13 职场文书
初中班主任心得体会
2016/01/07 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
一起来学习Python的元组和列表
2022/03/13 Python
基于Python实现对比Exce的工具
2022/04/07 Python