//密码大写输入提示
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. vs 加载 dll 缓慢

    https://jingyan.baidu.com/article/642c9d34e25cc2644b46f74b.html http://www.it610.com/article/2611781 ...

  2. Java Scanner Readable

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

  3. PHP 获取某年第几周的开始日期和结束日期的实例

    /** * 获取某年第几周的开始日期和结束日期 * @param int $year * @param int $week 第几周; */ public function weekday($year, ...

  4. json多态序列化

    https://blog.csdn.net/java_huashan/article/details/46428971 https://blog.csdn.net/bruce128/article/d ...

  5. nginx支持ssl双向认证配置

    nginx支持ssl双向认证配置 listen 443; server_name test.com; ssl on; ssl_certificate server.crt; //server端公钥 s ...

  6. ionic获取ios唯一设备id的解决方案

    经常有朋友来问这个问题. 每次都去解释这个问题也浪费不少时间, 所以还是开一篇文章, 把这个问题说清楚吧. 先纠正一个误区吧: 有同学可以通过ionic natvie的device插件获取. 我们在文 ...

  7. 【转】HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

    (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通 ...

  8. <泛> C++3D数学库设计详解 简单光学几何 && 随机向量生成

    // 注:本内容为作者原创,禁止在其他网站复述内容以及用于商业盈利,如需引用,请标明出处:http://www.cnblogs.com/lv_anchoret/  Preface 当初写这个库,是为了 ...

  9. POJ.2454.Jersey Politics(随机化算法)

    题目链接 \(Description\) 将长为\(3n\)的序列划分成\(3\)个子序列,要求至少有两个子序列的和都\(\geq 500*n\),输出任一方案.保证有解. \(Solution\) ...

  10. [CEOI2017]Palindromic Partitions

    [CEOI2017]Palindromic Partitions 题目大意: 给出一个长度为\(n(n\le10^6)\)的只包含小写字母字符串,要求你将它划分成尽可能多的小块,使得这些小块构成回文串 ...