用 JavaScript 检测大写锁定键的状态

有的时候尤其是在进行密码输入时，我们需要检查键盘上的 Caps Lock 键是否被打开，并通知用户。这时可以通过用 KeyboardEvent.getModifierState() 方法 CapsLock 的值来执行此操作。

为凉州等地区用户提供了全套网页设计制作服务，及凉州网站建设行业解决方案。主营业务为成都网站制作、成都网站设计、外贸营销网站建设、凉州网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

换句话说，我们必须侦听元素上的键盘事件才能检查 Caps Lock 键的状态：

HTML：

 
 
 
  
  
  
 
  
  
  
  Username: 
  
  
  
   
  
  
  
 
  
  
  
  Password: 
  
  
  
   
  
  
  
  Caps Lock is on 
  
  
  
 
 
 

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 方法，因为它在不同的操作系统和浏览器上的效果更好。

网页名称：用 JavaScript 检测大写锁定键的状态
标题URL：http://www.shufengxianlan.com/qtweb/news4/303704.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联