发布一个在Web下输入密码时提示大写锁定键的Jquery插件
功能介绍:
在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!
使用:
$("#txtPWD").capsLockTip();
截图预览:
代码(2012-05-03 10:20最后修改):
1. 使用公用静态对象,使多个密码框共享状态。
2. 增加focus 和 blur事件,提示更方便及时。
3. 优化代码。
4. 使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
5. 修正页面在Post后插件失效。
//=============== 大写锁定键打开提示 ============================================//
/*
使用:$("#txtPWD").capsLockTip(); //注意不要将些代码加在$(document).ready()里面。
*/
(function ($) {
$.fn.extend({
capsLockTip: function () {
return this.each(function () {
//创建对象实例并保存。
//获取实例对象:var api = $("#txtPWD").data("txtPWD");
var ins = new $.CapsLockTip($(this));
$(this).data(this.id, ins);
});
}
});
//创建一个实例。
//___target jq目标对象。
//___divTipID 显示提示文本的div。
$.CapsLockTip = function (___target) {
//设置当前实例的配置参数。
this.target = ___target;
var _this = this;
$(document).ready(function () {
_this.target.bind("keypress", function (_event) {
var e = _event || window.event;
var kc = e.keyCode || e.which;
var isShift = e.shiftKey || (kc == 16) || false;
$.fn.capsLockTip.capsLockActived = false;
if ((kc >= 65 && kc <= 90 && !isShift) || (kc >= 97 && kc <= 122 && isShift))
$.fn.capsLockTip.capsLockActived = true;
_this.showTips($.fn.capsLockTip.capsLockActived);
});
_this.target.bind("keydown", function (_event) {
var e = _event || window.event;
var kc = e.keyCode || e.which;
if (kc == 20 && null != $.fn.capsLockTip.capsLockActived){
$.fn.capsLockTip.capsLockActived = !$.fn.capsLockTip.capsLockActived;
_this.showTips($.fn.capsLockTip.capsLockActived);
}
});
_this.target.bind("focus", function (_event) {
if (null != $.fn.capsLockTip.capsLockActived)
_this.showTips($.fn.capsLockTip.capsLockActived);
});
_this.target.bind("blur", function (_event) {
_this.showTips(false);
});
});
//创建显示大写锁定的div。
this.createTooltip = function(){
if(null != $.fn.capsLockTip.divTip)
return $.fn.capsLockTip.divTip;
$("body").append("<div id='divTip__985124855558842555' style='width:100px; height:15px; padding-top:3px; display:none; position:absolute; z-index:9999999999999; text-align:center; color:Red; font-size:12px; border:solid 1px #DBC492; border-bottom-color:#B49366; border-right-color:#B49366;'>大写锁定已打开</div>");
$.fn.capsLockTip.divTip = $("#divTip__985124855558842555");
return $.fn.capsLockTip.divTip;
};
//显示或隐藏大写锁定提示。
this.showTips = function (display) {
var divTip = _this.createTooltip();
if (display) {
var offset = _this.target.offset();
divTip.css("left", offset.left + "px");
divTip.css("top", offset.top + _this.target[0].offsetHeight + 3 + "px");
divTip.show();
}
else {
divTip.hide();
}
};
//jq控件公用静态对象。
//提示框。
$.fn.capsLockTip.divTip = null;
//大写锁定键状态
$.fn.capsLockTip.capsLockActived = null;
};
})(jQuery);
发布一个在Web下输入密码时提示大写锁定键的Jquery插件的更多相关文章
- jquery插件--在input下输入密码时提示大写锁定键
//密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...
- Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法
Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法 在安装软件的时候,有时候提示,无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 这是 ...
- SVN下载时提示“已经锁定”
问题现象:同事让我提交代码,我就先下载后提交,但下载时提示“D:\ABC”已经锁定. 问题原因:原因不明. 问题处理:向上退一级,右击目录->SVN->"清理"-> ...
- web前端炫酷实用的HTML5应用和jQuery插件
又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...
- MDK下调试时提示AXF文件无法导入的解决方法(转)
源:http://blog.163.com/zhaojun_xf/blog/static/3005058020117784643555/ 在开发ARM项目中,很多工程师都不太喜欢使用MDK的调试模式, ...
- Xamarin.Android 在VS下调试时提示 In mgmain JNI_OnLoad 程序“Mono”已退出 解决办法
原因是使用了破解版的 Xamarin,调试时不能使用共享库
- centos下wget时提示unable to resolve host address ...
网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...
- 教你一步步发布一个开源库到 JCenter
今天想来分享下,如何一步步自己发布一个开源库到 JCenter 这方面的博客网上已经特别多了,所以本篇并不打算仅仅只是记录流程步骤而已,而是尽可能讲清楚,为什么需要有这个步骤,让大伙知其然的同时还知其 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
随机推荐
- How to change default root@ email address linux / postfix / centos?
Change root@hostname to different email address By default, any email sent by system is sent to root ...
- STM32之复用功能
复用功能分复用输入,复用输出,STM32芯片内部集成多种模块,如GPIO.串口.i2c等,为使IO端口支持这些模块,厂家对IO端口进行扩展,同一个端口通过设置寄存器会有不同的功能.如下图IO结构图: ...
- firefox 获取xpath
在做一个爬虫是,输入内容后,会自动显示内容,而且只能选择,不能根据输入的提交,一点就失去焦点,找不到相关内容 后来发现firefox的查看元素的最左边的类似于鼠标尖头的按钮,就是确保这种情况下,去查找 ...
- web框架解析
一.白手起家 要想模拟出web请求响应的流程,先想想平时我们是怎么上网浏览网页的?首先打开浏览器,然后在地址栏中输入我们想要访问的页面,紧接着按下回车键Enter,最后跳转至目标页面(当然我们也会出现 ...
- JAVA基础_修饰符
引言:Java的修饰符根据修饰的对象不同,分为类修饰符.方法修饰符.变量修饰符,其中每种修饰符又分为访问控制修饰符和非访问控制修饰符.访问控制存在的原因:a.让客户端程序员无法触及他们不应该触及的部分 ...
- Mysql union和union all用法
1: 什么时候用union和union all ? 我们经常会碰到这样的应用,两个表的数据按照一定的查询条件查询出来以后,需要将结果合并到一起显示出来,这个时候 就需要用到union和union ...
- Java8新特性 - 方法引用与构造器引用
方法引用 若Lambda体中的内容有方法已经实现了,我们可以使用"方法应用",可以理解为方法引用是Lambda表达式的另外一种表现形式. 使用操作符"::"将方 ...
- 艾瑞克·弗洛姆 ( Erich Fromm )
艾瑞克·弗洛姆 ( Erich Fromm ) 来源 https://www.zhihu.com/question/22891103 ------------------------------ 作者 ...
- WSL 服务自动启动
WSL 服务自动启动 参考 https://zhuanlan.zhihu.com/p/47733615 Windows 启用 WSL 功能支持 > Enable-WindowsOptionalF ...
- restTemplate源码解析(目录)
restTemplate是spring实现的,基于restful风格的http请求模板.使用restTemplate可以简化请求操作的复杂性,同时规范了代码风格.本系列文章,将根据以下目录顺序,从源码 ...