JQuery 文本框高亮显示插件

  以前使用Mootools Js框架,文本框有个$('id').highlight()高亮方法,使其高亮显示,效果如下:

2011040119460846.jpg

JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下;

代码如下:

jquery-highlight.js

/*description:TextBox HighLightauthor: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>

效果如下:

2011040119572779.png

转载于:https://www.cnblogs.com/liulikui/archive/2011/04/01/JQuery-Plugin.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链方法[C# 基础知识系列]专题三:如何用委托包装多个方法——委托链

最近研究链方法&#xff0c;稍微总结一下&#xff0c;以后继续补充&#xff1a; 弁言&#xff1a; 上一专题分析了下编译器是如何来翻译委托的&#xff0c;从中间语言的角度去看委托&#xff0c;希望可以帮助大家进一步的理解委托&#xff0c;然而之前的分析都是委托只是封装一…

51单片机lcd1602的简单实用

基础知识准备 lcd1602简介 图片来自b站斌哥单片机 需要关注的有以下几点&#xff1a; RS : 高数据低命令&#xff1b;RS 1时&#xff0c;lcd1602读写数据&#xff0c;RS0时&#xff0c;lcd1602读写命令R/W&#xff1a;高读低写&#xff1b;RW1时&#xff0c;单片机读取lcd160…

firedebug调试Jquery

不了解的同学先“点这里”看看什么是Firebug。简单来说&#xff0c;Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。 我们先到Firebug的主页上下载最新的版本装上&#xff0c;下面开始调试&#xff1a; 1、查看、编辑HTML元素及其(转) 安…

51单片机数字钟的实现

作业 用51单片机完成一个数字钟的计时及校时功能。 1、设置8个数码管的显示缓冲区为DISPBUFF[8],并初始化为02,02,-,04,08,-,03,06. 2、定时器0每隔5ms刷新一次数码管显示缓冲区&#xff0c;并显示时间(中断来做&#xff09; 3、定时器1负责精确定时&#xff0c;计时1s,每隔…

Google Map API 学习三

转载于:https://www.cnblogs.com/MyFlora/p/3154066.html

慎用SELECT INTO复制表

很多时候我们习惯于用SELECTINTO 复制一个表或表结构&#xff0c;因为它方便&#xff0c;快捷&#xff0c;而且在某些情况下效率比INSERT INTO 效率要高一些。但是要注意&#xff1a; SELECT INTO 复制表或表结构的时候&#xff0c;只是得到了一个“外壳”&#xff0c;就像克隆…

信号的采样与插值重建(包含matlab)

实验任务 双频信号的采样和插值重建&#xff1a;对双频信号进行采样&#xff08;符合奈奎斯特低通采样定理&#xff09;&#xff0c;绘制波形和频谱&#xff1b;编制sinc函数插值函数&#xff0c;对采样进行恢复&#xff0c;绘制波形。 实验原理 matlab代码 clear all; clos…

dc概论之IO约束

版权声明&#xff1a;转载时请以超链接形式标明文章原始出处和作者信息及本声明http://bb2hh.blogbus.com/logs/39654476.html 注明&#xff1a;如需转载&#xff0c;请注明作者出处&#xff0c;谢谢&#xff5e;&#xff0c;Author&#xff1a;pythonlong以下根据资料和个人体…

普通调幅(AM)与抑制载波双边带调幅(DSB)matlab编程实现

实验任务 实现单频信号的AM、DSB调制&#xff0c;绘制调制前后的波形和频谱 实验原理 matlab代码 AM调制 clear all; ts 0.0025; %信号抽样时间间隔 fs 1/ts; %抽样频率 t 0:ts:10-ts; %时间向量 df fs/length(t); %fft的频率分辨率 msg2 cos(2*pi*2*t); Pn fft(msg2…

MySQL中MySQL X.X Command Line Client一闪而过的问题

问题介绍&#xff1a;我安装完MySQL(我安装的是5.5)后&#xff0c;使用MySQL 5.5 Command Line Client&#xff0c;每次点击&#xff0c;总是一闪而过。解决方法如下&#xff1a;首先进入cmd 切入MySQL的安装目录&#xff0c;然后切入 bin 目录 &#xff0c;输入mysqld-nt --sk…

4pam调制与解调(matlab实现)

实验原理 这是一种使用脉冲幅度调制技术的线路编码。PAM4信号有四个电压电平&#xff0c;每个幅度电平分别对应逻辑比特00、01、10和11。换言之&#xff0c;PAM4编码的每个符号由2个比特组成&#xff0c;它们对应一个电压电平&#xff0c;即幅度。 00对应-3,01对应-1,10对应1,…

普通调幅(AM)与包络检波(matlab实现)

普通调幅&#xff08;AM&#xff09;与包络检波 1.实验任务 采用matlab实现普通调幅信号的包络检波&#xff0c;并绘制包络检波后的信号的波形与频谱。 2.实验原理&#xff08;请读者参见matlab通信仿真文件夹&#xff09; 3.matlab代码 time.33;%采样时长 Ts1/10000;%采样…

免费Google地图API使用说明(转)

转自&#xff1a;http://www.cnblogs.com/mypig/articles/1936154.html01事件监视 02 03GEvent.addListener用来注册事件监视器&#xff0c;在这个例子中&#xff0c;在用户移动或拖拽地图后&#xff0c;输出地图中心点的经/纬. 04 05 06var map new GMap(document.getElem…

双栈共享存储空间(C++代码实现)

理论部分 理论来源&#xff1a;b站up主:跟懒猫老师快乐数据结构 C代码 #include<iostream> using namespace std; const int STACKSIZE 6; //两栈共享存储空间编程 //使用类模板编程 template<class DataType> class BothStack { private:DataType *data;//属性…

毕业三年

2013年6月&#xff0c;毕业整整3年了。曾经的同伴&#xff0c;有人创业了&#xff0c;有人升职加薪&#xff0c;也有人职场失利。而我&#xff0c;做了2年多的独立开发者。 在大学的时候我学的是.net&#xff0c;在毕业前还去考了微软的认证&#xff0c;考过了&#xff0c;但考…

Muduo 网络编程示例之五: 测量两台机器的网络延迟

Muduo 网络编程示例之五&#xff1a; 测量两台机器的网络延迟 陈硕 (giantchen_AT_gmail) Blog.csdn.net/Solstice t.sina.com.cn/giantchen 这是《Muduo 网络编程示例》系列的第五篇文章。 Muduo 全系列文章列表&#xff1a; http://blog.csdn.net/Solstice/category/779646.…

数据结构表达式求值(C++)

实验原理 代码思路 使用两个顺序栈编程&#xff0c;一个顺序栈用来存储操作数&#xff0c;一个顺序栈用来存储操作符 关键为表达式求值函数的编写 对该函数&#xff0c;循环结束条件为栈顶元素为’#’,且读入的字符也为’#’ 循环体 &#xff08;1&#xff09;判断是否为操作…

中国互联网大佬江湖拼什么?拼财力拼出身拼前景拼造势

创业者千千万&#xff0c;大佬的椅子却有限。 马云、李彦宏、马化腾、雷军、周鸿祎、丁磊、张朝阳……大浪淘沙之中&#xff0c;他们挺住了&#xff0c;前进了&#xff0c;成功了。纵观互联网大佬修炼过程&#xff0c;虽然有机缘巧合&#xff0c;背后仍然有道可依。 表面风平浪…

Javascript中正则表达式的全局匹配模式

先看一道JavaScript题目&#xff0c;据说是国内某知名互联网企业的JavaScript笔试题&#xff0c;如果对正则的全局匹配模式不了解的话可能会对下面的输出结果感到疑惑。 View Code varstr "123#abc";varre /abc/ig;console.log(re.test(str)); //输出tureconsole.lo…

捕捉所有异常_详解Java中异常的分类

下面介绍几种常见的异常类型&#xff0c;便于在出错时对程序进行查错&#xff1a;&#xff08;1&#xff09;Exception 各种异常的根类如果你不知道将发生的异常集体属于哪&#xff0c;而可以肯定种这个地方会出现异常时&#xff0c;可以把异常类型定义为Exception。&#xff0…