使用 JavaScript 检测大写锁定键是否开启或关闭

2025年3月18日 | 阅读时长 4 分钟

我们将探讨 CAPS LOCK 键以及如何使用网页上的 JavaScript 来确定它是否已激活。在处理尖端在线应用程序时，我们经常需要特定数据，例如用户体验和交互。

当用户浏览网站时，功能会被执行，例如调用 API、管理启动过程的按钮点击等，还有很多。我们可能需要知道大写锁定键是否已激活。

身份验证系统会在 CAPS LOCK 键激活时提醒用户，这可能会影响用户的密码，这是一个用例。应该有一种方法可以在 JavaScript 中检查并避免使用大写锁定键。

KeyboardEvent

这个 Web API 使用它来处理键盘用户交互。不同的事件解释了已发生的不同类型的活动。

Keydown：按下键时调用。
Keyup：释放键后触发。

KeyboardEvent 对象指的是由键盘引起的事件。

修饰键

Shift、Ctrl、Alt 等修饰键分为两类，按下后保持激活状态。其他类包括 capslock 和其他在按下时启用，再次按下时禁用的键。这些键与其它键一起用于特定的功能或键盘快捷方式。

getModifierState

KeyboardEvent 对象的方法返回一个布尔值，指示在事件期间指定的修饰键是否已激活。

语法

以下语法有助于检测大写锁定键是否开启或关闭。

按下键时，keystring 显示“capslock”值作为输出。
使用 keystring 值，我们可以将数据显示为输出。

如何检测大写锁定键已开启。

下面将通过以下步骤显示大写锁定键的开启或关闭检测。

步骤 1：使用 HTML 页面创建一个用户交互标签并显示输出。

<input id="writeValue " value="Write Here...">
<p id="output_text">Caps lock is ON.</p>

步骤 2：使用 addEventLister 函数使用 JavaScript 页面方法。

var input_tag = document.getElementById("writeValue");
Input_tag.addEventListener("keyup", function(event) { //write js code )};

步骤 3：在 JavaScript 中，使用检测大写锁定键的语法。

if (event.getModifierState("CapsLock")) {
    //write display or output data.
  }

步骤 4：根据大写锁定键是开启还是关闭来显示输出信息。

示例

提供的示例识别了 JavaScript 函数和用户交互功能。示例有助于检测大写锁定按钮是开启还是关闭。

示例 1

基本的 JavaScript 示例显示输入字段后大写锁定按钮已开启。

<!DOCTYPE html>
<html>
<style>
#output_text {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
<input id = "writeValue" placeholder = "Write Here...">
<p id = "output_text"> Caps lock is ON. </p>
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";
  } else {
    output_text.style.display = "none"
  }
});
</script>
</body>
</html>

输出

下图通过文本显示了大写锁定键是开启还是关闭。

输出 1

点击大写锁定按钮之前

Detect or Check Caps Lock Key is ON or OFF using JavaScript

输出 2

点击大写锁定按钮之后

示例 2

基本的 JavaScript 示例显示在输入字段后大写锁定按钮是开启或关闭。点击大写锁定按钮后，值会显示在按钮上，释放按钮后，值会显示在按钮文本上。

<!DOCTYPE html>
<html>
<style>
p {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
<input id = "writeValue" placeholder = "Write Here...">
<p id = "output_text"> Caps lock is ON. </p>
<p id = "output_text1"> Caps lock is OFF. </p>
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
var output_text1 = document.getElementById("output_text1");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";
    output_text1.style.display = "none";
  } else {
    output_text1.style.display = "block";
    output_text.style.display = "none";
  }
});
</script>
</body>
</html>

输出

下图通过文本显示了大写锁定键是开启还是关闭。

输出 1

点击大写锁定按钮之后

输出 2

释放大写锁定按钮之后

示例 3

基本的 JavaScript 示例显示了大写锁定按钮是否开启或关闭，并进行了表单验证。在这里，我们对大写锁定按钮进行了验证。如果大写锁定按钮关闭，则发送错误。

<!DOCTYPE html>
<html>    
<style>
p {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
USER NAME: <input id = "writeValue" placeholder = "Write Here..."> 
<p id = "output_text"> Caps lock is ON. </p>
<br>
PASSWARD: <input type = "password" id = "writeValue1" placeholder = "Write Here...">
<p id = "output_text1"> Caps lock is ON. </p>
<br>
<input type = "button" value = "Submit"> 
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";   
  }else{
  output_text.style.display = "none"; 
  }
});
var input_val1 = document.getElementById("writeValue1");
var output_text1 = document.getElementById("output_text1");
input_val1.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text1.style.display = "block";   
  }else{
  output_text1.style.display = "none"; 
  }
});
</script>
</body>
</html>

产出

下图通过文本显示了大写锁定键是开启还是关闭。

输出 1

点击大写锁定按钮之后

输出 2

释放大写锁定按钮之后

结论

大写锁定键对于用户名、电子邮件 ID 和密码数据等输入字段至关重要。JavaScript 以简单易行的方式帮助检测或检查大写锁定键是开启还是关闭。此功能对于用户和开发人员的用户交互功能以及提交真实信息非常有用。

下一主题如何迭代 JavaScript 对象

使用 JavaScript 检测大写锁定键是否开启或关闭

KeyboardEvent

如何检测大写锁定键已开启。

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

使用 JavaScript 检测大写锁定键是否开启或关闭

KeyboardEvent

如何检测大写锁定键已开启。

示例

结论

相关帖子

Javascript history.pushState() 方法

JAVASCRIPT TRIGGER CLICK

如何在 JavaScript 中编写函数

Javascript offsetX 属性

JavaScript 数值分隔符

Vanilla JavaScript 是什么？

JavaScript onmousewheel 事件

JavaScript 调用栈

JavaScript indexedDB

如何计算 JavaScript 中的数字阶乘

订阅 Tpoint Tech

联系信息

关注我们