//密码大写输入提示
function capitalTip(id){
$('#' + id).after('<div class="capslock" id="capital_password"><span>大写锁定已开启</span></div>');
var capital = false; //聚焦初始化,防止刚聚焦时点击Caps按键提示信息显隐错误 // 获取大写提示的标签,并提供大写提示显示隐藏的调用接口
var capitalTip = {
$elem: $('#capital_'+id),
toggle: function (s) {
if(s === 'none'){
this.$elem.hide();
}else if(s === 'block'){
this.$elem.show();
}else if(this.$elem.is(':hidden')){
this.$elem.show();
}else{
this.$elem.hide();
}
}
}
$('#' + id).on('keydown.caps',function(e){
if (e.keyCode === 20 && capital) { // 点击Caps大写提示显隐切换
capitalTip.toggle();
}
}).on('focus.caps',function(){capital = false}).on('keypress.caps',function(e){capsLock(e)}).on('blur.caps',function(e){ //输入框失去焦点,提示隐藏
capitalTip.toggle('none');
});
function capsLock(e){
var keyCode = e.keyCode || e.which;// 按键的keyCode
var isShift = e.shiftKey || keyCode === 16 || false;// shift键是否按住
if(keyCode === 9){
capitalTip.toggle('none');
}else{
//指定位置的字符的 Unicode 编码 , 通过与shift键对于的keycode,就可以判断capslock是否开启了
// 90 Caps Lock 打开,且没有按住shift键
if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
// 122 Caps Lock打开,且按住shift键
capitalTip.toggle('block'); // 大写开启时弹出提示框
capital = true;
} else {
capitalTip.toggle('none');
capital = true;
}
}
}
};

再来看效果

测试地址: http://sms.reyo.cn 用户名:aa 密码:123456

jquery插件--在input下输入密码时提示大写锁定键的更多相关文章

  1. 发布一个在Web下输入密码时提示大写锁定键的Jquery插件

    功能介绍:在Web下输入密码时提示大写锁定键,封装成jq插件方便有需要的同学!使用:$("#txtPWD").capsLockTip();截图预览:代码(2012-05-03 10 ...

  2. jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...

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

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

  4. jquery插件artTxtCount输入字数限制,并提示剩余字数

    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  5. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  6. jquery插件制作,下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

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

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

  8. jquery中当CheckBoxList被选中时提示

    $(function(){ $('input:checkbox').on('change', function(){ //当复选框选中时出现提示 if($('input:checkbox:checke ...

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

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

随机推荐

  1. java 内部类和向上转型

    当将内部类向上转型为其基类时,尤其是转型为一个接口的时候,内部类就有了用武之地,(从实现某个接口的对象,得到对接口的引用,与向上转型为这个对象的基类,实际上是一样的效果,),这是因为此内部类---某个 ...

  2. java 内部类使用 .this 和 .new

    如果需要生成对外部类对象的引用,可以使用外部类的名字后面紧跟圆点和this,这样产生的引用自动地具有正确的类型,这一点在编译器就被知晓并受到检查,因此并没有运行时开销 //: innerclasses ...

  3. Java Scanner Readable

    通过implements(实现)Readbale interface(接口)的 read() method(方法) 实现自己添加字符到buffer里,然后读取 //策略模式package object ...

  4. PHP操作Redis常用

    一.Redis连接与认证 //连接参数:ip.端口.连接超时时间,连接成功返回true,否则返回false $ret = $redis->connect('127.0.0.1', 6379, 3 ...

  5. EFCore CodeFirst 适配数据库

    EF6中可以直接根据代码模型生成数据库Database.SetInitializer即可 在EFCore中如何实现呢? 这项功能放在了DatabaseFacade对象中,传入数据库上下文对象实例化到一 ...

  6. hdu 2545 求当前结点到根节点的距离

    求当前结点到根节点的距离 Sample Input 2 1 //n m 1 2 1 2 //询问 5 2 1 2 1 3 3 4 3 5 4 2 //询问 4 5 0 0 Sample Output ...

  7. 【AtCoder】AtCoder Petrozavodsk Contest 001

    A - Two Integers 如果\(X\)是\(Y\)的倍数的话不存在 可以输出\(X \cdot (\frac{Y}{gcd(X,Y)} - 1)\) 代码 #include <bits ...

  8. date命令使用文档

    date命令的帮助信息 [root@localhost source]# date --help用法:date [选项]... [+格式] 或:date [-u|--utc|--universal] ...

  9. 黑马程序员_java基础笔记(14)...交通灯管理系统_编码思路及代码

    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流! —————————— 1,面试题——交通灯管理系统 模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: ...

  10. 100BASE-TX / 100BASE-T4/100BASE-FX

    IEEE标准共有以下几种:10BASE-5:粗缆.最大传输距离500米,使用AUI连接器连接或使用收发器电缆和收发器(MAU)进行连接.10BASE-2:细缆.实际传输距离为185米,使用BNC连接器 ...