使用 JavaScript 实现大写锁定

在某些情况下，需要使用大写字母来输入，例如密码输入框中的密码，当大写锁定键被打开时，所有字符都变成大写。在本文中，我们将使用 JavaScript 实现大写锁定功能。

实现步骤

1. 监听键盘事件，当用户按下大写锁定键时，将其状态存储在一个变量中。
2. 监听输入事件，在输入任何字符之前检查大写锁定键的状态，如果打开，则将字符转换为大写。

生成随机密码示例代码：

<input type="password" id="password" placeholder="Password">
<button onclick="generatePassword()">Generate Password</button>

<script>
function generatePassword() {
  const length = 10;
  const upperCase = true;
  const numbers = true;
  const symbols = false;

  const password = generate(length, upperCase, numbers, symbols);
  document.getElementById('password').value = password;
}

function generate(length, upperCase, numbers, symbols) {
  const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numberChars = '0123456789';
  const symbolChars = '!@#$%^&*()_+=';

  let chars = lowerCaseChars;
  if (upperCase) chars += upperCaseChars;
  if (numbers) chars += numberChars;
  if (symbols) chars += symbolChars;

  let password = '';
  for (let i = 0; i < length; i++) {
    const index = Math.floor(Math.random() * chars.length);
    password += chars[index];
  }

  return password;
}

let isCapsLockOn = false;
document.addEventListener('keydown', function(event) {
  if (event.getModifierState('CapsLock')) {
    isCapsLockOn = true;
  }
});

document.addEventListener('keyup', function(event) {
  isCapsLockOn = false;
});

document.getElementById('password').addEventListener('keypress', function(event) {
  if (isCapsLockOn) {
    event.preventDefault();
    const char = event.key.toUpperCase();
    event.target.value += char;
  }
});
</script>

解释说明

我们的代码定义了一个 isCapsLockOn 的全局变量来跟踪大写锁定键的状态。我们使用 keydown 和 keyup 事件来监测大写锁定键的状态。在 keydown 事件中，我们调用 event.getModifierState('CapsLock') 函数来检查大写锁定键是否打开。如果打开，我们将 isCapsLockOn 变量设置为 true。在 keyup 事件中，我们将 isCapsLockOn 变量设置为 false 以便下一次键盘事件正确检测大写锁定键的状态。

在密码输入框的 keypress 事件中，我们首先检查 isCapsLockOn 变量的值，如果打开，我们使用 event.key.toUpperCase() 函数将字符转换为大写，并将其附加到密码输入框的值中，同时禁止默认行为 event.preventDefault()，以防止字符输入在输入框外输入。

总结

在本文中，我们学习了如何使用 JavaScript 监听键盘事件来实现大写锁定功能。我们的代码检查是否打开 CapsLock 键并将所有输入字符转换为大写，以便方便输入密码等场景。可以使用此方法在各种 Web 应用程序中实现大写锁定功能。