网站首页 > 技术文章 正文
小编在打字时很多时候没注意到大写锁定已经打开,等打字的时候才会发现。但是在输入密码的时候却是不容易发现的,那么如何让用户知道自己的大写锁定已经开启了呢?
为了检测用户是否打开了键盘的大写锁定,我们将采用KeyboardEvent的getModifierState方法:
document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) {
const capsLockOn = keyboardEvent.getModifierState('CapsLock');
if (capsLockOn) {
//警告用户他们的大写锁定是开启的
}
});
KeyboardEvent是什么?
KeyboardEvent 对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键(或一个按键和修饰键的组合)的单个交互;事件类型keydown, keypress 与 keyup 用于识别不同的键盘活动类型。——KeyboardEvent - Web API | MDNMDN Web DocsMDN logoMozilla logo
注意:
KeyboardEvent 只在低级别提示用户与一个键盘按键的交互是什么,不涉及这个交互的上下文含义。当你需要处理文本输入的时候,使用 input 事件代替。用户使用其他方式输入文本时,如使用平板电脑的手写系统或绘图板,键盘事件可能不会触发。
getModifierState是什么?
我的理解是getModifierState在以按键为中心的事件期间提供有关用户键盘的信息
这是w3c官网有关信息https://w3c.github.io/uievents/#dom-eventmodifierinit-metakey
猜你喜欢
- 2024-11-17 看完这几道 JavaScript 面试题,让你与考官对答如流(上)
- 2024-11-17 JS 鼠标框选(页面选择)时返回对应的 HTML 或文本内容
- 2024-11-17 一文读懂 WebAssembly(WASM)中的字符串
- 2024-11-17 http连接泄露,httpClient到底要关闭哪些资源
- 2024-11-17 DefineProperty 和Proxy双向绑定演示,你还不知道么?
- 2024-11-17 必考知识点-JavaScript类型转换(讲原理)
- 2024-11-17 文件上传,排版是伤(上传文件出现乱码是怎么回事)
- 2024-11-17 分享一些有趣的,你从不使用的html属性
- 2024-11-17 惊艳到了,每个开发人员都必须要知道的6个HTML属性!
- 2024-11-17 (鸡汤文)这一次我终于搞懂了 JavaScript 定时器的 this 指向
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-