检测大写锁定是否开启

假设我们希望在用户输入输入值(例如密码字段)时让用户知道大写锁定是否打开。

基本结构如下：

id 为 message 的元素将用于显示消息。

使用 getModifierState() 方法

getModifierState() 方法返回给定修改键的状态。通过从事件对象调用 getModifierState('CapsLock') 来让我们知道键是否被按下了 CapsLock 键。

const textboxEle = document.getElementById('textbox')
const messageEle = document.getElementById('message')

textboxEle.addEventListener('keydown', function (e) {
  const capsLockOn = e.getModifierState('CapsLock')

  // 更新消息内容
  messageEle.innerHTML = capsLockOn ? '大写锁定打开' : ''

  // 根据 CapsLock 状态显示或隐藏消息
  messageEle.style.display = capsLockOn ? 'block' : 'none'
})

这种方法不支持用户按下 Shift 键的情况。

支持 Shift 键

我们可以通过键盘事件和事件对象，对 shift 键是否被按下进行判断：

const textboxEle = document.getElementById('textbox')
const messageEle = document.getElementById('message')

textboxEle.addEventListener('keypress', function (e) {
  const isMac = /Mac/.test(navigator.platform)

  const keyCode = e.keyCode || e.which

  // Shift 键是否按下？
  const shiftKey = e.shiftKey || keyCode === 16

  // 获取被按下的字符
  const s = String.fromCharCode(keyCode)
  const capsLockOn =
    (s.toUpperCase() === s && s.toLowerCase() !== s && !(shiftKey && isMac)) ||
    (s.toUpperCase() !== s && s.toLowerCase() === s && shiftKey)

  messageEle.innerHTML = capsLockOn ? '大写锁定打开' : ''
  messageEle.style.display = capsLockOn ? 'block' : 'none'
})

查看效果