如何检测大写锁定键是否打开？
在使用某种 Web 应用程序时，我们经常需要了解有关用户交互的各种信息以相应地执行我们的功能，即我们使用 API 来处理按钮点击、监听键的方法等。类似地，在某些情况下，我们可能会使用需要知道 Caps Lock 是否处于活动状态。这种情况的一个用例可以是身份验证系统，其中应用程序在输入密码期间大写锁定打开时通知用户。希望 javascript 提供了解决这种情况的方法和技术，我们将在本文中讨论所有内容。
KeyboardEvent：此Web API 用于处理用户通过键盘进行的交互，各种事件描述发生了哪种活动。
- keydown：按下某个键时触发。
- keyup：释放键时触发。
由于键盘而发生的事件属于 KeyboardEvent 对象。
修饰键：这些键与其他键一起使用以执行某些特殊目的或快捷方式。有两种类型的修改键在按下时保持激活状态，即 shift、ctrl、alt 等。另一种是在按下时激活和再次按下时停用的修饰键，即大写锁定等。
getModifierState：这是 KeyboardEvent 对象的方法，并返回一个关于在该事件期间给定修饰键是否被激活的布尔值。
句法：
const isActive = event.getModifierState(keyString);
// It will return a boolean
// keyString: A string to be passed i.e. "Alt",
// "CapsLock", "Control", "NumLock", etc.示例：现在我们将检测 Capslock 键是否打开。在这里，我们将演示一个简单的示例，在该示例中，我们将检测大写锁定键的激活状态。
第 1 步：这里我们创建了一个简单的 HTML 页面，其中包含一个带有一些文本和输入元素的 div 以及一个用于显示警告文本的段落。
index.html
CapsLock Detecter
Enter Some Text:
index.js
// Get the input field
const input = document.getElementById("text");
// Get the warning warnText
const warnText = document.getElementById("warn");
// add event listener to input
input.addEventListener("keyup", function(event) {
// If capslock is pressed, display the warnText
if (event.getModifierState("CapsLock")) {
warnText.style.display = "block";
} else {
warnText.style.display = "none";
}
});第 2 步：这个 index.js 文件附加在前 HTML 文件的 script 标签中。我们只是提取输入元素来添加一个事件监听器，我们也提取警告文本段落来改变它的样式。之后，我们为“ keyup ”事件传递了一个回调函数给方法addEventListener 。在该函数中，我们正在检查大写锁定键是否打开或何时释放。
index.js
// Get the input field
const input = document.getElementById("text");
// Get the warning warnText
const warnText = document.getElementById("warn");
// add event listener to input
input.addEventListener("keyup", function(event) {
// If capslock is pressed, display the warnText
if (event.getModifierState("CapsLock")) {
warnText.style.display = "block";
} else {
warnText.style.display = "none";
}
});
输出：这将是上述代码片段的输出，每次我们按下按键时，都会在按键释放时生成一个事件。
说明：这里我们输入了“abc”，一旦我们按下大写锁定，事件就会生成，然后功能会检测到它并更改要显示的 p 元素。同样，当我们按下 caps lock 时，该事件将在按键释放时生成，并且功能会检测到它，因此下次我们按下任何键时 p 标签将隐藏。