使用JavaScript检测Caps Lock状态，修复关闭时无提示问题

核心问题出在你的JavaScript代码的else分支中，你将提示文本设为空字符串，而非需求要求的“WARNING! caps lock is off”。直接修改该分支内容即可解决问题：

修改后的JavaScript代码 #

window.addEventListener('keyup', event => {
  var isCaps = event.getModifierState('CapsLock');
  const alertElement = document.getElementById('alert');
  if (isCaps) {
    alertElement.innerText = "WARNING! caps lock is on";
  } else {
    // 替换空字符串为关闭状态提示文本
    alertElement.innerText = "WARNING! caps lock is off";
  }
})

额外优化建议 #

全局监听keyup事件会导致页面任意位置按下Caps Lock都触发提示，可能影响用户体验。建议改为仅在确认密码输入框上监听事件，仅当用户操作该输入框时显示状态提示：

修改后的HTML代码 #

<form action="#" method="post">
  <h1>login Form</h1>
  <div>
    <label for="username">username</label>
    <input id="username" type="text" name="username">
  </div>
  <div>
    <label for="password">password</label>
    <input type="password" name="password" id="password">
  </div>
  <div>
    <label>confirm password</label>
    <!-- 添加针对该输入框的keyup事件监听 -->
    <input type="password" name="confirm_password" id="confirm_password" onkeyup="checkCapsLock(event)">
    <br>
    <error id="alert"> </error>
  </div>
  <div>
    <button type="button">submit</button>
  </div>
</form>

对应优化后的JavaScript代码 #

function checkCapsLock(event) {
  var isCaps = event.getModifierState('CapsLock');
  const alertElement = document.getElementById('alert');
  if (isCaps) {
    alertElement.innerText = "WARNING! caps lock is on";
  } else {
    alertElement.innerText = "WARNING! caps lock is off";
  }
}

内容的提问来源于stack exchange，提问作者khodidas patel