如何在密码字段中检测CAPS LOCK状态

Byr*_*ock 10 javascript

可能重复:
如何使用JavaScript判断大写锁定是否已启用?

在网络表单中,是否有任何方法可以判断大写锁定是否已打开?

我想我可以检查一下检查onChange是否所有字符都是大写的.但有更直接的方法吗?

具体来说,我想在他们输入密码字段时实现"你的大写锁定已开启"消息,类似于Windows登录屏幕的方式.

dmc*_*lis 3

您可以在这里找到如何执行此操作的一个不错的示例:http://www.codeproject.com/KB/scripting/Detect_Caps_Lock.aspx

您可以将该代码包装到不同类型的事件中,即 onfocus 或 on document load。

您可以通过谷歌搜索关键代码的索引(我会发布一个链接,但我没有足够高的业力来发布多个链接,抱歉)。

为简单起见,您要查找的代码是 20(大写锁定)。


从网站复制的说明(许可证:CPOL

构建脚本

<script language="Javascript">
function capLock(e){
 kc = e.keyCode?e.keyCode:e.which;
 sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
 if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
  document.getElementById('divMayus').style.visibility = 'visible';
 else
  document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
Run Code Online (Sandbox Code Playgroud)

现在我们的脚本已经准备好了。现在我们需要将此脚本与我们的表单关联起来。

使用脚本

让我们添加两个项目:一个文本框和一个 DIV。现在我们只需要调用 onKeyPress 事件即可。

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div> 
Run Code Online (Sandbox Code Playgroud)

  • 在 2017 年以上,使用 [`event.getModifierState('CapsLock');`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) - ([caniuse?]( http://caniuse.com/#search=getModifierState)) (6认同)