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

在使用某种网络应用程序时，我们经常需要了解用户交互的各种信息，以相应地执行我们的功能，例如使用API来处理按钮点击，使用方法来监听按键等。同样，有些情况下，我们需要知道大小写锁定是否激活。这种情况的一个用例可能是身份验证系统，在输入密码时应用程序会通知用户大小写锁定是否打开。幸运的是，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.

示例: 现在我们将检测大写锁定键是否打开。在这里，我们将演示一个简单的示例，我们将检测大写锁定键的激活状态。

步骤 1: 在这里，我们创建了一个简单的HTML页面，其中包含一个带有一些文本和输入元素的div以及一个用于显示警告文本的段落。

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>CapsLock Detecter</title> 
</head> 
  
<body> 
    <div>Enter Some Text: <input id="text" type="text" /></div> 
    <p id="warn" style="display:none; color:red"> 
        Warning: CapsLock is On! 
    </p> 
  
    <script src="./index.js"></script> 
</body> 
  
</html>

步骤 2： 这个index.js文件附加在前面HTML文件的script标签中。我们只是提取了input元素来添加一个事件监听器，同时提取了警告文本段落以更改其样式。然后我们将回调函数传递给方法 addEventListener 用于“ keyup ”事件。在该函数内部，我们将检查大写锁定键是否打开或键是否释放。

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"; 
    } 
});

输出: 以上代码片段的输出将会是每次按下按键时，松开按键时会生成一个事件。

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