代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>大写键盘锁定提示</title>

</head>

<body>

请输入密码：<input class="text" id="loginPasswd" type="password"/>

<div id="capital" style="display:none;color:#F90;padding:2px 0 2px 95px;position:absolute;">大写锁定已开启</div>

<script type="text/javascript">

    var inputPWD = document.getElementById('loginPasswd');

    inputPWD.onfocus = function () {

        isCapsLock();

    }

    /* 检测输入框的大小写是否开启 */

    function isCapsLock() {

        var inputPWD = document.getElementById('loginPasswd');

        var capital = false;

        var capitalTip = {

            elem: document.getElementById('capital'),

            toggle: function (s) {

                var sy = this.elem.style;

                var d = sy.display;

                if (s) {

                    sy.display = s;

                }

                else {

                    sy.display = d == 'none' ? '' : 'none';

                }

            }

        }

        var detectCapsLock = function (event) {

            if (capital) {

                return

            }

            ;

            var e = event || window.event;

            var keyCode = e.keyCode || e.which;

            var isShift = e.shiftKey || (keyCode == 16 ) || false;

            if (((keyCode >= 65 && keyCode <= 90 ) && !isShift) || ((keyCode >= 97 && keyCode <= 122 ) && isShift)) {

                capitalTip.toggle('block');

                capital = true

            }

            else {

                capitalTip.toggle('none');

            }

        }

        //判断是否是IE浏览器(解决自带的和自写的重复出现问题)

        function isIE() {

            if (!!window.ActiveXObject || "ActiveXObject" in window) {

                return true;

            }

            else {

                return false;

            }

        }

        //如果不是IE则进行手动提示

        if (!isIE()) {

            inputPWD.onkeypress = detectCapsLock;

            inputPWD.onkeyup = function (event) {

                var e = event || window.event;

                if (e.keyCode == 20 && capital) {

                    capitalTip.toggle();

                    return false;

                }

            }

        }

    }

</script>

</body>

</html>

需要注意:

需要通过获取焦点事件调用判断大写键盘锁定事件,如果直接调用会出现密码框失去焦点后切换大写锁定后再次进入密码框会出现大写锁定提示错误的问题

js实现密码输入框对开启键盘大写锁定的提示(IE浏览器下有自动识别提示则不执行(用IE自带效果即可))的更多相关文章

  1. js实现判断大写锁定是否开启（转）

    转载地址:http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html 在用户登录输入密码时,常常会有因为大写锁定开启而造成输入密码 ...

  2. GetKeyState和GetAsyncKeyState以及GetKeyboardState函数的用法与区别2-------C#检查键盘大小写锁定状态

    1.命名空间:using System.Runtime.InteropServices;2.导入方法[DllImport("user32.dll", EntryPoint = &q ...

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

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

  4. js监听用户的键盘敲击事件，兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  5. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

  6. 使用html+css+js实现倒计时，开启你痛苦的倒计时吧

    使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...

  7. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  8. kali 开启键盘背光灯 && 自定义开启终端

    新建文件保存扩展名为.sh 编辑文件,键入如下代码 #!/bin/bash - status=/tmp/keyboard_led_status if [[ ${1} == "on" ...

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

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

随机推荐

  1. Python 使用 Windows10 桌面通知

    前言 Win10 没有提供简单命令行方式来触发桌面通知,所以使用 Python 来写通知脚本. 一番搜索,找到 win10toast .但这开源仓库已无人维护,通过 github fork 的关系图, ...

  2. K8S配置多集群访问

    中文官档: http://docs.kubernetes.org.cn/823.html 背景:我们通过会有多个k8s集群,例如集群(cn-k8s)和集群(jp-k8s),那个就需要有一台服务器可以同 ...

  3. iOS应用性能调优--初级---王朋

    目录 我要给出的建议将分为三个不同的等级: 入门级. 中级和进阶级: 入门级(这是些你一定会经常用在你app开发中的建议) 1. 用ARC管理内存 2. 在正确的地方使用reuseIdentifier ...

  4. zabbix 监控系统概述及部署

    zabbix 监控系统概述及部署 1.Zabbix是什么: zabbix是一个个基于web界而的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系 ...

  5. mybatis的一对多（collection）

    使用图解: 低效率查询: 高效率查询: 1 查询用联合查询 2<collection 里面不写column

  6. Spark算子 - reduce

    释义 reduce将partition内所有记录最终计算成1个记录,结果类型与reduce 时数据类型一致 方法签名如下: def reduce(f: (T, T) => T): T = wit ...

  7. Linux基础：子网划分

    一.ip地址基本知识 1.1 ip地址的结构和分类 1.2 特殊ip地址 1.3 子网掩码 1.4 ip地址申请 二.子网划分 2.1 子网划分概念 2.2 c类子网划分初探 2.3 子网划分步骤 2 ...

  8. 搭建 NFS 服务 & 实时同步

    今日内容 NFS简介 实现 NFS 文件同步功能 NFS 配置详解 统一用户 搭建 web 服务 NFS 实现文件共享 内容详细 1.NFS 简介 1.1 介绍 实现多台 web 服务器可以共享数据资 ...

  9. Solution -「NOI.AC 省选膜你赛」array

    题目 题意简述   维护一个长度为 \(n\) 的序列 \(\{a_n\}\),并给出 \(q\) 个操作: 将下标为 \(x\) 的数修改为 \(y\). 给定 \(l,r,k\),求最大的 \(m ...

  10. shell脚本批量配置多台主机静态ip

    关于脚本 服务器使用之前,都需要先配置静态IP,那就将这种简单重复的工作,交给脚本来处理吧,让我们运维有更多的时间喝茶看报刷微博 脚本使用 sh ssh.sh ip.txt ssh.sh 为脚本的名称 ...