-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-03-22
来源 ：前端先锋
阅读 683
评论 0
摘要：本文主要介绍了web前端Javascript学习之用 JavaScript 检测大写锁定键的状态，通过具体的内容向大家展现，希望对大家前端Javascript的学习有所帮助。
本文主要介绍了web前端Javascript学习之用 JavaScript 检测大写锁定键的状态，通过具体的内容向大家展现，希望对大家前端Javascript的学习有所帮助。
有的时候尤其是在进行密码输入时，我们需要检查键盘上的 Caps Lock 键是否被打开，并通知用户。这时可以通过用 KeyboardEvent.getModifierState() 方法 CapsLock 的值来执行此操作。
换句话说，我们必须侦听元素上的键盘事件才能检查 Caps Lock 键的状态：
HTML：
<form>
<label for="username">Username:</label>
<input id="username" name="username">
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<span id="password-message" style="display: none">Caps Lock is on</span>
</form>
JavaScript：
const el = document.getElementById('password');
const msg = document.getElementById('password-message');
el.addEventListener('keyup', e => {
msg.style = e.getModifierState('CapsLock')
? 'display: block'
: 'display: none';
});
通过上面的例子可以看到，在选择的元素上使用了 'keyup' 事件，然后调用 KeyboardEvent.getModifierState() 并检查 'CapsLock' 键的状态。'keydown'和 'keypress' 也能起到类似的作用。但是在多台设备上进行测试后，似乎应该首选 keyup 方法，因为它在不同的操作系统和浏览器上的效果更好。
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取学习教程，开发工具，代码大全，参考书籍
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
