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 写类方式之二
Jul 05 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
vue微信分享插件使用方法详解
Feb 18 Javascript
详解Vite的新体验
Feb 22 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 URL编码解码函数代码
2009/03/10 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python下载的库包存放路径
2020/07/27 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
销售总经理岗位职责
2014/03/15 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
装修安全责任协议书
2016/03/22 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP