js监控输入密码检测大写键盘是否锁定

最新推荐文章于 2024-02-19 11:54:19 发布
最新推荐文章于 2024-02-19 11:54:19 发布
阅读量937 收藏
点赞数
分类专栏： 转载笔记





[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.         <title>智能营销平台</title>  
  8.       
  9.     </head>  
  10.   
  11.     <body>  
  12.             <div>   
  13.     <input class="text" name="passwd" id="loginPasswd" type="password" style="*display:block;" />   
  14.         <div style="color:#F90;padding:2px; position:absolute; display:none;" id="capital">大写锁定已开启</div>   
  15.     <script type="text/javascript">  
  16.     (function(){   
  17.     var inputPWD = document.getElementById('loginPasswd');   
  18.     var capital = false;   
  19.     var capitalTip = {   
  20.     elem:document.getElementById('capital'),   
  21.     toggle:function(s){   
  22.     var sy = this.elem.style;   
  23.     var d = sy.display;   
  24.     if(s){   
  25.     sy.display = s;   
  26.     }else{   
  27.     sy.display = d =='none' ? '' : 'none';   
  28.     }   
  29.     }   
  30.     }   
  31.     var detectCapsLock = function(event){   
  32.     if(capital){return};   
  33.     var e = event||window.event;   
  34.     var keyCode = e.keyCode||e.which; // 按键的keyCode   
  35.     var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住   
  36.     if (   
  37.     ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键   
  38.     || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键   
  39.     ){capitalTip.toggle('block');capital=true}   
  40.     else{capitalTip.toggle('none');}   
  41.     }   
  42.     inputPWD.onkeypress = detectCapsLock;   
  43.     inputPWD.onkeyup=function(event){   
  44.     var e = event||window.event;   
  45.     if(e.keyCode == 20 && capital){   
  46.     capitalTip.toggle();   
  47.     return false;   
  48.     }   
  49.     }   
  50.     })()   
  51.     </script>   
  52.     </div>  
  53.   
  54.     </body>  
  55.   
  56. </html>  



[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.         <title>智能营销平台</title>  
  8.       
  9.     </head>  
  10.   
  11.     <body>  
  12.             <div>   
  13.     <input class="text" name="passwd" id="loginPasswd" type="password" style="*display:block;" />   
  14.         <div style="color:#F90;padding:2px; position:absolute; display:none;" id="capital">大写锁定已开启</div>   
  15.     <script type="text/javascript">  
  16.     (function(){   
  17.     var inputPWD = document.getElementById('loginPasswd');   
  18.     var capital = false;   
  19.     var capitalTip = {   
  20.     elem:document.getElementById('capital'),   
  21.     toggle:function(s){   
  22.     var sy = this.elem.style;   
  23.     var d = sy.display;   
  24.     if(s){   
  25.     sy.display = s;   
  26.     }else{   
  27.     sy.display = d =='none' ? '' : 'none';   
  28.     }   
  29.     }   
  30.     }   
  31.     var detectCapsLock = function(event){   
  32.     if(capital){return};   
  33.     var e = event||window.event;   
  34.     var keyCode = e.keyCode||e.which; // 按键的keyCode   
  35.     var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住   
  36.     if (   
  37.     ((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键   
  38.     || ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键   
  39.     ){capitalTip.toggle('block');capital=true}   
  40.     else{capitalTip.toggle('none');}   
  41.     }   
  42.     inputPWD.onkeypress = detectCapsLock;   
  43.     inputPWD.onkeyup=function(event){   
  44.     var e = event||window.event;   
  45.     if(e.keyCode == 20 && capital){   
  46.     capitalTip.toggle();   
  47.     return false;   
  48.     }   
  49.     }   
  50.     })()   
  51.     </script>   
  52.     </div>  
  53.   
  54.     </body>  
  55.   
  56. </html>  
453444346
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
输入密码检测大写是否锁定js实现代码
10-27
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写，这样有助于提醒用户,需要学习的朋友可以参考下
输入密码时检测大写是否锁定的js代码
12-02
在本文中，我们将探讨如何利用JavaScript（简称js）编写代码以实现在用户输入密码时检测键盘上的大写锁定（Caps Lock）功能是否被激活。大写锁定键是电脑键盘上的一个功能键，当该功能激活时，用户输入的字母将自动...
用 JavaScript 检测键盘大写锁定键的状态 - JS 判断大写锁定
最新发布
zhichaosong的博客
02-19 1027
用户在输入密码的时候，由于看不到输入的字母，这时如果 Caps Lock 大写锁定键打开，会给用户造成不必要的困扰。让我们看看如何使用JavaScript检测大写锁定。有更好的浏览器支持，所以我们更喜欢使用它。如果您有任何问题，请在评论中告诉我们。的方法，我们可以使用它来执行此操作。如果我们愿意的话，我们还可以使用。这段代码告诉我们如何使用。
转：js-PC版监听键盘大小写事件
weixin_30727835的博客
07-31 343
//获取键盘按键事件，可以使用keyup。 //问题:获取到键盘的按下Caps lock键时，不能知道当前状态是大写、还是小写状态。 //解决: 设置一个全局判断大小写状态的 标志：isCapital = -1; //是否大写 -1:无状态、0:小写、1:大写 　　给window加一个监听键盘事件方便判断大小写状态， 　　给所有的输入都加上键盘监听事件，监听大小写切换。 如何判断键盘...
js实现判断大写锁定是否开启（转）
weixin_30621959的博客
03-04 401
转载地址：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html 在用户登录输入密码时，常常会有因为大写锁定开启而造成输入密码错误的情况，如果在用户大写锁定开启时给予提示，就可以尽量避免这种情况的发生。 一下是代码: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1....
js判断右键菜单和大小写键盘是否锁定
Thunderfox
10-24 371
How do you tell if caps lock is on using JavaScript? function isCapslock(e){ e =(e)? e : window.event;var charCode =false;if(e.which){ charCode = e.which;}elseif(e.keyCode){ ...
输入密码检测大写是否锁定js实现代码.docx
01-22
### 输入密码检测大写是否锁定JS实现代码 随着互联网应用的普及和发展，用户界面的友好性和安全性变得尤为重要。为了提高用户体验并确保安全，许多网站在用户登录时会提供额外的功能，比如检测大写锁定键是否开启。...
输入密码时检测大写是否锁定的js代码.docx
01-22
### 输入密码时检测大写是否锁定的JS代码详解 #### 一、背景介绍 在现代Web应用中，用户体验是至关重要的一个方面。特别是在涉及到账户安全的场景中，比如登录过程，提供良好的用户体验不仅可以提高用户的满意度，...
一款不错的键盘密码输入js程序
10-31
根据提供的信息，我们可以深入探讨这款键盘密码输入JS程序的关键技术和实现细节。虽然代码片段并不完整，但基于已有的部分，可以推断出该程序的主要功能和技术要点。 ### 一、程序概述 该程序是一个用于网页上的...
js检测用户输入密码强度
11-25
一个用Javascript检测用户输入密码强度的效果代码，以下代码主要是从以下四个方面检测用户输入的密码的强度的，有兴趣的朋友可以自己添加或修改成自己想要的形式！ 1. 如果输入的密码位数少于5位，那么就判定为弱。 ...
JQuery实现输入框大写提示
12-31
资源为一个简单的登陆界面，大写监听绑定在密码输入的输入框上，使用浏览器打开login.html即可查看
判断密码输入是否开启大写
04-28
java web判断密码输入是否开启大写
javascript实现前端input密码输入强度验证
10-15
JavaScript 实现前端输入密码强度验证是一种常见的用户交互设计，它能帮助用户创建更安全的密码。下面我们将详细探讨如何利用JavaScript实现这一功能。 首先，密码强度验证的核心在于使用正则表达式来检查用户输入...
js实现密码强度检测【附示例】
10-22
js实现密码强度检测是指通过JavaScript编程语言编写的一段代码，用于在用户输入密码时，根据密码的组成、长度等因素判断密码的安全性级别，一般是分为“弱”、“中”、“强”三个等级。在用户注册或更改密码时，这种...
js实现开启密码大写提示
10-20
这个函数的作用是监控指定的密码输入框，并在用户输入时检查是否含有大写字母。如果用户输入的字符满足大写要求，函数可以显示一个提示信息。为了调用这个函数，我们使用了`window.onload`事件处理器，在页面加载...
JS校验大写键是否打开＜亲测可用＞
qq_41202277的博客
12-21 964
<input type="password" id="password" name="password" /> <span id="pawClId" style="color:red;display:none;">大写锁定键打开,请注意大小写!</span> <script type="text/javascript"> document.getElementById('password').onkeypress = detectCapsLock; func
js大小写锁判断
weixin_34363171的博客
09-16 295
<html> <head> <title>CapsLock Demo</title> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/j...
js实现的键盘开启大写锁定提示和密码显示与隐藏的效果
json_li的博客
05-02 7680
不知道大家注意到没有，很多人性话的网站再输入密码的时候，如果开启大写锁定下过（切换键A左边的Cap Lock按键），那么就会给出一个提示，因为很多时候密码验证是区分大小写的，如果不小心开启或者关闭大小写就有可能导致输入密码错误，还有在用户输入密码时，可以通过密码的显示与隐藏来查看输入的是否就是自己想输入的密码，减少密码输入的错误，都是一些人性化，提高用户体验性的举措， 下面就介绍一下如何利用ja
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值