博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery插件--在input下输入密码时提示大写锁定键
阅读量:2229 次
发布时间:2019-05-09

本文共 1866 字,大约阅读时间需要 6 分钟。

//密码大写输入提示    function capitalTip(id){        $('#' + id).after('
大写锁定已开启
'); 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; } } } };

再来看效果

 

测试地址: 用户名:aa 密码:123456

 

转载于:https://www.cnblogs.com/interdrp/p/6749959.html

你可能感兴趣的文章
contOS6 部署 lnmp、FTP、composer、ThinkPHP5、docker详细步骤
查看>>
TP5.1模板布局中遇到的坑,配置完不生效解决办法
查看>>
PHPstudy中遇到的坑No input file specified,以及传到linux环境下遇到的坑,模板文件不存在
查看>>
TP5.1事务操作和TP5事务回滚操作多表
查看>>
composer install或composer update 或 composer require phpoffice/phpexcel 失败解决办法
查看>>
TP5.1项目从windows的Apache服务迁移到linux的Nginx服务需要注意几点。
查看>>
win10安装软件 打开时报错 找不到 msvcp120.dll
查看>>
PHPunit+Xdebug代码覆盖率以及遇到的问题汇总
查看>>
PHPUnit安装及使用
查看>>
PHP项目用xhprof性能分析(安装及应用实例)
查看>>
composer安装YII
查看>>
Sublime text3快捷键演示
查看>>
sublime text3 快捷键修改
查看>>
关于PHP几点建议
查看>>
硬盘的接口、协议
查看>>
VLAN与子网划分区别
查看>>
Cisco Packet Tracer教程
查看>>
02. 交换机的基本配置和管理
查看>>
03. 交换机的Telnet远程登陆配置
查看>>
微信小程序-调用-腾讯视频-解决方案
查看>>