JavaScript检测Caps Lock状态并提示用户
作者：半夏时间：2026-10-21 21:18:06浏览：289
本文介绍如何使用JavaScript检测密码输入框中Caps Lock大写锁定键的状态。通过监听keypress事件，结合event.keyCode和event.shiftKey属性判断按键组合，实时显示提示信息，提升用户输入体验并减少密码错误。
Caps Lock状态检测需求与价值
在涉及密码输入的页面场景中，用户往往不清楚当前是否开启了大写锁定。如果系统能实时提示Caps Lock的状态，将显著提升用户体验。
以下示例代码展示了具体的实现方法，关键逻辑均已在代码中添加注释说明。
核心知识点：keyCode与shiftKey
本方案核心涉及两个关键知识点：event.keyCode用于获取按键代码，event.shiftKey用于判断Shift键状态。
JavaScript检测代码实现
代码实现如下：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Detect Caps Lock </TITLE> </HEAD> <BODY> <input type ="password" name ="pwd" onkeypress ="detectCapsLock(event)" /> <div id ="capStatus" style ="visibility:hidden"><font color =red> Caps Lock is on. <font></div> </BODY> </HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
原文：http://www.blogjava.net/majianan/archive/2007/02/01/97284.html
作者最新文章
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13