代码如下:

<!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. PyCharm破解无限试用

    一:安装插件 1.打开PyCharm,进入后,点击左上角File,在点击Settings(设置). 2.进入后,点击Plugins,在点击(2.设置图标),然后点击Manage Plugin Repo ...

  2. FastDFS文件同步

    FastDFS同步相关文件: a)10.100.66.82_23000.mark 内容如下: binlog_index=0 binlog_offset=1334 need_sync_old=1 syn ...

  3. 如何在pyqt中实现带动画的动态QMenu

    弹出菜单的视觉效果 QLineEdit 原生的菜单弹出效果十分生硬,而且样式很丑.所以照着Groove中单行输入框弹出菜单的样式和动画效果写了一个可以实现动态变化Item的弹出菜单,根据剪贴板的内容是 ...

  4. 详解git pull和git fetch的区别(原理)

    感谢原文作者:马恩光 原文链接:https://blog.csdn.net/weixin_41975655/article/details/82887273 前言 在我们使用git的时候用的更新代码是 ...

  5. bom案例2-弹出层

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 重力感应 加速计－ By严焕培

    //  加速计-传统用法 // //  Created by 严焕培 on 15-05-19. //  Copyright (c) 2015年 sibu. All rights reserved. / ...

  7. web虚拟主机、日志分割以及日志分析

    目录 一.构建虚拟web主机 1.1 概述 1.2 支持的虚拟主机类型 1.3 部署虚拟主机步骤 1.3.1 基于域名的虚拟主机 (1)为虚拟主机提供域名解析 (2)为虚拟主机准备网页文档 (3)添加 ...

  8. Springboot+Redisson自定义注解一次解决重复提交问题（含源码）

    前言   项目中经常会出现重复提交的问题,而接口幂等性也一直以来是做任何项目都要关注的疑难点,网上可以查到非常多的方案,我归纳了几点如下:   1).数据库层面,对责任字段设置唯一索引,这是最直接有效 ...

  9. go基础——运算符

    算数运算符 /* 算术运算符:+,-,*,/,%,++,-- */ a := 10 b := 3 sum := a + b //加减乘类似 fmt.Printf("%d + %d = %d\ ...

  10. 014 Linux 线上高频使用以及面试高频问题——如何查找大文件并安全的清除？

    目录 1 案例描述? 2 命令一(目录统计排序最佳命令) 3 命令二(最实用,目录和文件一起统计排序) (1)命令详情和说明 (2)du.head.sort.awk 详细说明参考已有文章附录 (3)L ...