資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
