代码如下:

<!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. LNMP架构搭建

    目录 一:LNMP架构简介 1.Nginx与uwsgi 二:django框架+python 1.创建用户 2.安装依赖包 3.安装uwsgi和django 4.测试python 5.创建django项 ...

  2. a-b转换A-B

  3. 导入 static 修饰的包

    一 static关键字,可以修饰变量  方法  代码块 ,  静态内部类.  还可以用来修饰 需要导入的包 准备工作 package zhouxufeng; public class Text1 { ...

  4. Linux配置Redis集群 和 缓存介绍。

    // 一.什么是缓存? mybatis一级缓存和二级缓存 mybatis的一级缓存存在哪? SqlSession,就不会再走数据库 什么情况下一级缓存会失效? 当被更新,删除的时候sqlsession ...

  5. Android 使用签名的好处【转】

    感谢大佬:https://zhidao.baidu.com/question/360127490062917572.html 平时我们的程序可以在模拟器上安装并运行,是因为在应用程序开发期间,由于是以 ...

  6. java基础-抽象类与接口（转）

    抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 一.抽象类    ...

  7. linux修改root用户登陆密码

    如果不是以root用户登录的,请先切换到root用户下, 执行命令:su root 然后按提示输入root用户的密码. 英文系统: [root@localhost ~]# passwd Changin ...

  8. socket在php作用

    PHP 使用Berkley的socket库来创建它的连接.你可以知道socket只不过是一个数据结构.你使用这个socket数据结构去开始一个客户端和服务器之间的会话.这个服务器是一直在监听准备产生一 ...

  9. 带你十天轻松搞定 Go 微服务系列（九、链路追踪）

    序言 我们通过一个系列文章跟大家详细展示一个 go-zero 微服务示例,整个系列分十篇文章,目录结构如下: 环境搭建 服务拆分 用户服务 产品服务 订单服务 支付服务 RPC 服务 Auth 验证 ...

  10. Springboot整合ElasticSearch进行简单的测试及用Kibana进行查看

    一.前言 搜索引擎还是在电商项目.百度.还有技术博客中广泛应用,使用最多的还是ElasticSearch,Solr在大数据量下检索性能不如ElasticSearch.今天和大家一起搭建一下,小编是看完 ...