首页 > 编程语言 >使用 JavaScript 检测大写锁定键(Detect Caps Lock with JavaScript)(转)

使用 JavaScript 检测大写锁定键(Detect Caps Lock with JavaScript)(转)

时间:2024-07-19 18:23:07浏览次数:19  
标签:Detect false 锁定键 getModifierState JavaScript 大写 caps boolean

原文地址:Detect Caps Lock with JavaScript - 使用 JavaScript 检测大写锁定

By David Walsh on February 6, 2024
作者:大卫·沃尔什,2024 年 2 月 6 日

Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn't so obvious. That leads to the user's password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated.

任何人都可以在任何给定时间打开大写锁定键,而自己却没有意识到。用户在输入大多数内容时可以轻松发现不需要的大写锁定,但在使用 password input 时,问题并不那么明显。这会导致用户的密码不正确,这很令人烦恼。理想情况下,开发人员可以让用户知道他们的大写锁定键已激活。


To detect if a user has their keyboard's caps lock turn on, we'll employ KeyboardEvent's getModifierState method:

要检测用户是否打开了键盘的大写锁定,我们将使用 KeyboardEventgetModifierState 方法:

document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Warn the user that their caps lock is on?
    }
});

I'd never seen `getModifierState` used before, so I explored the [W3C documentation](https://w3c.github.io/uievents/#event-modifier-initializers) to discover other useful values:

我以前从未见过使用 getModifierState ,因此我探索了 W3C 文档以发现其他有用的值:

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

getModifierState provides a wealth of insight as to the user's keyboard during key-centric events. I wish I had known about getModifier earlier in my career!

getModifierState 在以按键为中心的事件期间提供有关用户键盘的丰富见解。我希望我在职业生涯的早期就知道 getModifier

标签:Detect,false,锁定键,getModifierState,JavaScript,大写,caps,boolean
From: https://www.cnblogs.com/520future/p/18312076

相关文章

  • JavaScript 基础知识 Day01
    一、计算机基础知识1、计算机数据存储单位位(Bit):1bit可以保存一个0或者1(最小的存储单位)字节(Byte):1B=8b千字节(KB):1KB=1024B兆字节(MB):1MB=1024KB吉字节(GB):1GB=1024MB太字节(TB):1TB=1024GB2、关于JavaScript 它是在1952年2月由网景开......
  • JavaScript复习记录(6)— 对闭包的理解,闭包使用场景
    闭包(Closure)指的是一个函数可以访问其外部作用域(即使这个函数是在外部作用域之外执行的)。换句话说,闭包是函数和声明该函数的词法环境的组合。闭包的形成闭包在以下情况下形成:当一个内部函数被保存到外部后,即使外部函数已经执行完毕,内部函数仍然可以访问外部函数中的变量。......
  • JavaScript手机号实名认证接口如何集成 验证手机号与持有人是否一致
    手机号实名认证接口是一种用于验证手机号码是否存在的实名登记服务,能够核验三大运营商(中国移动、中国电信、中国联通)手机号码的实名认证状态,通常被应用于网站、电商平台注册、支付平台注册等场景中,以便于核验用户身份的真伪,以此来保障用户身份信息与财产不受损失!随着市场......
  • JavaScript 异步编程
    0x01概念说明与基本使用Promise是在ES6中引入的类,用于更好地编写复杂的异步任务在ES6之前的异步请求的处理方案中,通常通过传递回调函数的方式处理请求结果,由于各个请求对回调函数不统一,每次请求时都需要查看相应的源码,造成效率低下,因此需要约定共同的标准,即Promise类......
  • 解决BHG:no labels found in detect set, can not compute metrics without labels
    背景:在用yolov8训练别的数据集时,出现“nolabelsfoundindetectset,cannotcomputemetricswithoutlabels”问题。数据集格式:解决方法:在ultralytics\data\dataset.py中找到img2label关键词,并跳转到utils.py文件。修改这段代码的绿色部分(images/labels):(如我所使用的......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站(西餐)
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 如何在 Vue 和 JavaScript 中截取视频任意帧图片
    如何在Vue和JavaScript中截取视频任意帧图片大家好!今天我们来聊聊如何在Vue和JavaScript中截取视频的任意一帧图片。这个功能在很多场景下都非常有用,比如视频编辑、视频预览等。本文将带你一步步实现这个功能,并且会提供详细的代码示例。准备工作首先,我们需要一个Vue......
  • njs最详细的入门手册:Nginx JavaScript Engine
    原文链接:https://hi.imzlh.top/2024/07/08.cgi关于njs首先,njs似乎在国内外都不受关注,资料什么的只有官网参考手册,出了个问题只能看到GithubIssue所以,这篇文章将我的探索过程展示给大家,njs对于可用存储空间较小的设备真的很友好,相比较于NodeJS、Deno这种80M起步的运行环境真的......
  • 编程世界的对决:JavaScript vs Java
    在编程领域,Java和JavaScript这两门语言各有千秋。它们不仅在语法上有着明显的区别,在编程理念、表现力、类型转换以及代码的易读性和复杂性方面也有着巨大的差异。本文将深入探讨JavaScript相较于Java的优势,以及两者在代码风格和开发体验上的不同。1.表现力的对比1.1JavaScr......
  • 常用的 JavaScript 数组处理方法
    1.map方法用于创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后返回的结果。letitems=[{id:1,name:'item1'},{id:2,name:'item2'},{id:3,name:'item3'}];letitemNames=items.map(item=>item.name);console.log(itemNames);......