JavaScript 检测或检查大小写锁定键是否打开或关闭

我们将在网页上使用JavaScript来研究大小写锁定键并确定其是否被激活。在处理尖端在线应用程序时，我们经常需要特定的数据，例如用户体验和交互。

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

验证系统会在大小写锁定键被激活且可能影响用户密码时提醒用户，这是一个应用场景。应该有一种方法来检查并避免JavaScript中的大小写锁定键。

KeyboardEvent

该Web API用于处理键盘用户交互。不同的事件解释了已发生的不同类型的活动。

Keydown : 按下键时调用。
Keyup : 松开键时触发。

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

修饰键：Shift、Ctrl、Alt和其他修饰键分为两类，按下后仍保持激活状态。其他键包括大小写锁定键和其他在按下时启用并在再次按下时取消激活的键。这些键与其他键一起用于特定功能或键盘快捷键。
getModifierState：KeyboardEvent对象的方法返回一个布尔值，指示事件期间指定的修饰键是否被激活。

语法

以下语法有助于检测大小写锁定键是打开还是关闭。

const cdVar = event.getModifierState(keyString);

键字符串显示键被按下时的“大写锁定”值作为输出。
使用键字符串的值，我们可以将数据显示为输出。

如何检测大写锁定键是否已打开

使用以下步骤显示检测大写锁定键是否已打开或关闭。

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

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

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

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

步骤3： 在 JavaScript 中，使用 detect capslock 键的语法。

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

步骤4： 根据大写锁定键是否打开，显示输出信息。

text.style.display = "block";

示例

给定的示例识别了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

点击大写锁定键之前

JavaScript 检测或检查大小写锁定键是否打开或关闭

输出2

在点击大写锁定按钮之后

JavaScript 检测或检查大小写锁定键是否打开或关闭

示例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>

输出

以下图片显示了Caps Lock的开关状态以及使用文本进行的说明。

输出1

点击Caps Lock按钮后

JavaScript 检测或检查大小写锁定键是否打开或关闭

输出2

释放大写锁定按钮后

JavaScript 检测或检查大小写锁定键是否打开或关闭

示例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

点击大写锁定按钮后

JavaScript 检测或检查大小写锁定键是否打开或关闭