输入密码时判断是否开启大写锁定

前言

任何人在任何时候都有可能悄无声息的把大写锁定打开。在大部分输入时，用户可以轻易地发现输入的是大写。但，在输入密码时，用户就不容易发现了。为了更好的用户体验，我们可以在用户输入密码时提示大写锁定已开启。你也一定见过这种场景吧。

提示用户大写锁定已开启

 1const inputElement = document.querySelector('#your-input-element');
 2
 3inputElement.addEventListener('keydown', function(event) {
 4    if (event.getModifierState('CapsLock')) {
 5        console.log('大写锁定是打开的');
 6    } else {
 7        console.log('大写锁定是关闭的');
 8    }
 9});
10

上面的代码是在监听用户在输入框输入时判断的，当然也可以在按下任何键的时候判断。

getModifierState

1getModifierState(key)
2

KeyboardEvent.getModifierState() 方法返回指定修饰键的当前状态：如果修饰键处于活动状态（即修饰键被按下或锁定），则返回 true ，否则返回 false。

参数key还可以是Alt、NumLock等。对修饰符及不同平台的支持可见此链接。

使用场景

检测快捷键组合

检查多个修饰键是否同时被按下。

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('Control') && event.getModifierState('Alt') && event.key === 'S') {
3        // 执行Ctrl+Alt+S的快捷操作
4    }
5});
6

优化输入体验

1document.addEventListener('input', function(event) {
2    if (event.getModifierState('NumLock') && event.target.type === 'number') {
3        // 提示用户NumLock可能影响输入
4    }
5});
6

创建自定义键盘快捷操作

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('Shift') && event.getModifierState('Alt') && event.key === 'Z') {
3        // 执行自定义操作
4    }
5});
6

仅能使用getModifierState的场景

检测大写锁定

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('CapsLock')) {
3        console.log('Caps Lock is active');
4    }
5});
6

检测数字锁定

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('NumLock')) {
3        console.log('Num Lock is active');
4    }
5});
6

某些情况下，可能误触数字锁定键，或者初始某些键盘初始就是数字锁定的。当你输入u，显示4；当你输入k，显示的是2。这时候就需要按一下F11解除数字锁定。

检测滚动锁定

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('ScrollLock')) {
3        console.log('Scroll Lock is active');
4    }
5});
6

检测其他特殊修饰键

1document.addEventListener('keydown', function(event) {
2    if (event.getModifierState('AltGraph')) {
3        console.log('AltGraph is active');
4    }
5    if (event.getModifierState('OS')) {
6        console.log('OS key (Windows key or Command key) is active');
7    }
8});
9

参考链接

MDN: getModifierState

David Walsh: detect-caps-lock