代码如下:

<!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. CTF入门学习5-> 前端JavaScript基础

    Web安全基础 JavaScript的实现包括以下3个部分: 1)核心语法:描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器 ...

  2. AT2644 [ARC076C] Connected?

    可以发现这个问题是存在边界的,那么我们可以先放宽一下条件思考一下没有边界的情况. 通过手玩可以发现,若不存在边界总是可以完成这个任务的. 因为两条曲线之间不存在交点,那么每次我们可以从空隙穿过一条直线 ...

  3. Java多线程基础-ThreadLocal

    感谢原文作者:Yuicon 原文链接:https://segmentfault.com/a/1190000016705955 序 在多线程环境下,访问非线程安全的变量时必须进行线程同步,例如使用 sy ...

  4. shell 的here document 用法 (cat << EOF) （转）

    什么是Here Document Here Document 是在Linux Shell 中的一种特殊的重定向方式,它的基本的形式如下 cmd << delimiter Here Docu ...

  5. Ajax接收服务器返回的信息response

    Ajax可以向服务器发起请求,有去的方式,那么久必然可疑返回. 服务器返回的信息也可以通过Ajax接收. Ajax共有5种状态: 1.创建对象,没有调用open方法 2.对象发起请求http,已经调用 ...

  6. python中一个经典的参数错误

    直接上代码 class Company: def __init__(self, name, staffs=[]): self.name = name self.staffs = staffs def ...

  7. mysql入门基础增删查改

    数据查询语法(DQL) DQL就是数据查询语言,数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端. 语法: SELECT selection_list /*要查询的列名称*/ F ...

  8. 优化UITableViewCell高度计算的那些事 by －－胡 xu

    这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell UITableView+FDTemplateLayout ...

  9. Python--变量和简单数据类型

    Python--变量和简单数据类型 目录 Python--变量和简单数据类型 一.Python脚本运行过程 二.变量 1. 变量的命名和使用 2. Python关键字和内置函数 2.1 Python关 ...

  10. docker | jenkins 实现自动化部署项目，后端躺着把运维的钱挣了！(上)

    前言 背景 最近在帮学校导师写项目,团队有4个人,项目前后端分离.如果是选择瀑布式开发:(在约定好接口的情况下)A.B同学写前端,C.D同学写后端,然后约定一个时间统一联调,最后将项目交付安装到客户机 ...