功能介绍:
在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插件的更多相关文章

  1. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  2. Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法

    Ubuntu下安装软件提示无法锁定管理目录(/var/lib/dpkg/)的解决办法   在安装软件的时候,有时候提示,无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 这是 ...

  3. SVN下载时提示“已经锁定”

    问题现象:同事让我提交代码,我就先下载后提交,但下载时提示“D:\ABC”已经锁定. 问题原因:原因不明. 问题处理:向上退一级,右击目录->SVN->"清理"-> ...

  4. web前端炫酷实用的HTML5应用和jQuery插件

    又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...

  5. MDK下调试时提示AXF文件无法导入的解决方法(转)

    源:http://blog.163.com/zhaojun_xf/blog/static/3005058020117784643555/ 在开发ARM项目中,很多工程师都不太喜欢使用MDK的调试模式, ...

  6. Xamarin.Android 在VS下调试时提示 In mgmain JNI_OnLoad 程序“Mono”已退出 解决办法

    原因是使用了破解版的 Xamarin,调试时不能使用共享库

  7. centos下wget时提示unable to resolve host address ...

    网络正常的情况,可以查看/etc/resolv.conf [root@localhost ~]# more /etc/resolv.conf # Generated by NetworkManager ...

  8. 教你一步步发布一个开源库到 JCenter

    今天想来分享下,如何一步步自己发布一个开源库到 JCenter 这方面的博客网上已经特别多了,所以本篇并不打算仅仅只是记录流程步骤而已,而是尽可能讲清楚,为什么需要有这个步骤,让大伙知其然的同时还知其 ...

  9. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

随机推荐

  1. 016 Android 图片选择器(在选中和未选中的过程中,切换展示图片)

    1.目标效果 在选中和未选中的过程中,切换展示图片 2.实现方法 (1)在app--->res--->drawable 右击drawable文件夹右键,new ---->drawab ...

  2. [转帖]AMD三代锐龙线程撕裂者命名曝光:24核心3960X

    AMD三代锐龙线程撕裂者命名曝光:24核心3960X https://www.cnbeta.com/articles/tech/900271.htm 一直搞不懂TDP啥意思 可能会高于TDP的功率.. ...

  3. 华为模拟机试_C++题解

    华为模拟机试 [编程|100分] a+b 题目描述 计算a+b的和 每行包含两个整数a和b 对于每行输入对应输出一行a和b的和 输入 1 5 输出 6 自解 #include<iostream& ...

  4. PAT(B) 1083 是否存在相等的差(Java)统计

    题目链接:1083 是否存在相等的差 (20 point(s)) 题目描述 给定 N 张卡片,正面分别写上 1.2.--.N,然后全部翻面,洗牌,在背面分别写上 1.2.--.N.将每张牌的正反两面数 ...

  5. 【并发】8、借助redis 实现多线程生产消费阻塞队列

    顾名思义这个就是再消费的时候,不是之前的那哥用yield进行线程切换的操作,而是用线程等待阻塞的方式去执行,说实话我感觉效率不一定有之前那个好, 因为我对这种阻塞队列使用的时候,之前有发现阻塞队列,塞 ...

  6. vue 等比例截图组件,支持缩放和旋转

    <template> <div class="crop-image" :style="wrapStyle"> <img :src= ...

  7. Spring Cloud Alibaba学习笔记(13) - Spring Cloud Stream的监控与异常处理

    Spring Cloud Stream监控 Spring Boot Actuator组件用于暴露监控端点,很多监控工具都需要依赖该组件的监控端点实现监控.而项目集成了Stream及Actuator后也 ...

  8. SQL Sever 刪除重複數據只剩一條

    use book go create table ##T1( n int, a nvarchar(20) ) --查詢重複記錄,插入臨時表 insert into ##T1(n,a) select s ...

  9. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  10. Fortify漏洞之Path Manipulation(路径篡改)

    继续对Fortify的漏洞进行总结,本篇主要针对 Path Manipulation(路径篡改)的漏洞进行总结,如下: 1.Path Manipulation(路径篡改) 1.1.产生原因: 当满足以 ...