代码如下:

<!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. python07day

    回顾 id == is: ==: 数值是否相同 is: 内存地址是否相同 id: 获取对象的内存地址 代码块: 一个文件.交互式命令一行都是一个代码块 同一代码块下缓存机制(字符串驻留机制) 所有数字 ...

  2. 面向次世代的Windows App SDK 近况

    Project Reunion作为面向次世代Windows App Development的统一工具集.在2021年11月,第三个稳定版正式以1.0的版本号发布的同时,改名部果断出手,以全新的名称Wi ...

  3. Java反射机制及原理

    一.概念 java程序运行时动态的创建类并调用类的方法和属性   二.原理简介 Class<?> clz = Class.forName("java.util.ArrayList ...

  4. art 模式 android runtime

    空间换时间的概念. art:程序在安装时需要预编译读取,将代码转换为机器码 好处:程序运行时,无需时时转换,运行速度快 : 缺点:安装时间稍长,由于转换机器码,所以占用略高的存储空间.

  5. list和tuple的用法区别

    1.list中是可变的,tuple不可变  所以tuple没有insert, pop,append方法 2.定义只有一个元素的tuple的时候,必须加逗号,否则不会被认为是tuple,而被识别为括号 ...

  6. iOS 七大手势之轻拍，长按，旋转手势识别器方法-赵小波

    一.监听触摸事件的做法 如果想监听一个view上面的触摸事件,之前的做法通常是:先自定义一个view,然后再实现view的touches方法,在方法内部实现具体处理代码 通过touches方法监听vi ...

  7. k8s之list-watch机制、节点调度以及亲和性

    k8s之list-watch机制.节点调度以及亲和性 目录 k8s之list-watch机制.节点调度以及亲和性 一.list-watch机制 1. list-watch介绍 2. list-watc ...

  8. 取代 Mybatis Generator，这款代码生成神器配置更简单，开发效率更高！

    作为一名 Java 后端开发,日常工作中免不了要生成数据库表对应的持久化对象 PO,操作数据库的接口 DAO,以及 CRUD 的 XML,也就是 mapper. Mybatis Generator 是 ...

  9. 硬件安全学习–RFID / Hardware security learning – RFID

    RFID基础知识 RFID是什么? RFID代表近距离通讯(Radio Frequency Identification). ------------------------------------- ...

  10. intellij IDEA 安装、简单使用与创建javaWeb项目

    这里我用mac for intellij IDEA 进行演示 1.安装 安装的话不多说 与我之前发的webstorm一样  这里提供下intellij IDEA的破解站http://xidea.onl ...