数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 JavaScript 检测 Caps Lock 是否开启？
在本文中，我们将探讨 **Caps Lock** 键以及如何使用 JavaScript 在网页上检查它是否已打开。在使用新一代 Web 应用程序时，我们经常需要某些信息，包括用户交互和体验。
用户与网站交互以执行功能，例如点击 API、处理触发方法的点击或按钮等等。在某些情况下，我们可能需要知道 Caps Lock 键是否已打开。
一个 **用例** 可以是任何身份验证系统，它会通知用户 Caps Lock 键已打开，并且可能会干扰用户的密码。幸运的是，JavaScript 提供了一种方法来检查并解决 Caps Lock 键的问题。
**键盘事件** - 在这种类型的 Web API 中，用户与键盘交互，并且各种事件描述了由于键盘交互而发生的活动类型。
**KeyDown 事件** - 当按下键时触发。
**KeyUp 事件** - 当释放键时触发。
这些事件主要来自键盘，属于 KeyboardEvent 对象。
**修饰键**: 我们还有修饰键，它们与其他键一起使用，执行某些特殊用途或快捷方式以触发方法。例如，Shift、Ctrl、Alt 等是两种类型的在按下时激活的修饰键。其他一些在按下时激活锁定的键包括 Caps Lock。
**getModifierState** - 我们可以使用 KeyboardEvent 对象中的此方法，当修饰键被激活时，它会返回一个布尔值。
语法
const isActive = event.getModifierState(keyString);
它将返回一个布尔变量，指示键是否被激活。
示例
在下面的示例中，我们创建一个简单的 HTML 页面，其中包含一个输入框。输入框将接收用户的字符输入，并且每当进行任何输入时，它将调用 JavaScript 函数，该函数将根据 Caps Lock 键返回 true 或 false。如果 Caps Lock 键已打开，则返回 true，否则返回 false。
在脚本中，我们只是提取添加了事件侦听器的输入元素。每当触发事件时，它都会读取所需详细信息并返回输出。
# filter.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>CapsLock Detecter</title>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<div>Enter Some Text: <input id="text" type="text" /></div>
<p id="warn" style="display:none; color:red">
Warning: CapsLock Key is On!
</p>
<script type="text/javascript">
// 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";
}
});
</script>
</body>
</html>当 CapsLock 开启时，将显示警告“警告：CapsLock 键已开启！”
输出
779 次浏览
