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模板实现方法
Apr 27 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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 破解防盗链图片函数
2008/12/09 PHP
php基础学习之变量的使用
2011/06/09 PHP
分享php分页的功能模块
2015/06/16 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
李敖北大演讲稿
2014/05/24 职场文书
学校春季防火方案
2014/06/08 职场文书
保密工作承诺书
2014/08/29 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
三八节活动简报
2015/07/20 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书