Many existing answers will check for caps lock on when shift is not pressed but will not check for it if you press shift and get lowercase, or will check for that but will not also check for caps lock being off, or will check for that but will consider non-alpha keys as 'off'. Here is an adapted jQuery solution that will show a warning if an alpha key is pressed with caps (shift or no shift), will turn off the warning if an alpha key is pressed without caps, but will not turn the warning off or on when numbers or other keys are pressed.

$("#password").keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
  });

你可以试试。增加了一个工作示例。当焦点在输入上时，打开caps lock使led变成红色或绿色。(还没有在mac/linux上测试)

注意:两个版本都适用于我。感谢您在评论中提出建设性意见。

旧版本:https://jsbin.com/mahenes/edit?js,output

另外，这是一个修改后的版本(有人能在mac上测试并确认吗)

新版本:https://jsbin.com/xiconuv/edit?js,output

新版本:

function isCapslock(e) {
  const IS_MAC = /Mac/.test(navigator.platform);

  const charCode = e.charCode;
  const shiftKey = e.shiftKey;

  if (charCode >= 97 && charCode <= 122) {
    capsLock = shiftKey;
  } else if (charCode >= 65 && charCode <= 90
    && !(shiftKey && IS_MAC)) {
    capsLock = !shiftKey;
  }

  return capsLock;
}

旧版本:

function isCapslock(e) {
  e = (e) ? e : window.event;

  var charCode = false;
  if (e.which) {
    charCode = e.which;
  } else if (e.keyCode) {
    charCode = e.keyCode;
  }

  var shifton = false;
  if (e.shiftKey) {
    shifton = e.shiftKey;
  } else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
  }

  if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
  }

  if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
  }

  return false;
}

对于国际字符，可以根据需要为以下键添加额外的检查。你必须获得你感兴趣的字符的键码范围，可能是通过使用一个键映射数组，它将保存你正在寻址的所有有效用例键…

大写字母A-Z或'Ä'， 'Ö'， 'Ü'， 小写字母a-Z或0-9或'ä'， 'ö'， 'ü'

上面的键只是示例表示。

这是一种解决方案，除了在写入时检查状态外，还在每次按下Caps Lock键时切换警告消息(有一些限制)。

它还支持A-Z范围之外的非英语字母，因为它根据toUpperCase()和toLowerCase()检查字符串字符，而不是根据字符范围检查。

$(function(){ //Initialize to hide caps-lock-warning $('.caps-lock-warning').hide(); //Sniff for Caps-Lock state $("#password").keypress(function(e) { var s = String.fromCharCode( e.which ); if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) { this.caps = true; // Enables to do something on Caps-Lock keypress $(this).next('.caps-lock-warning').show(); } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)|| (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { this.caps = false; // Enables to do something on Caps-Lock keypress $(this).next('.caps-lock-warning').hide(); }//else else do nothing if not a letter we can use to differentiate }); //Toggle warning message on Caps-Lock toggle (with some limitation) $(document).keydown(function(e){ if(e.which==20){ // Caps-Lock keypress var pass = document.getElementById("password"); if(typeof(pass.caps) === 'boolean'){ //State has been set to a known value by keypress pass.caps = !pass.caps; $(pass).next('.caps-lock-warning').toggle(pass.caps); } } }); //Disable on window lost focus (because we loose track of state) $(window).blur(function(e){ // If window is inactive, we have no control on the caps lock toggling // so better to re-set state var pass = document.getElementById("password"); if(typeof(pass.caps) === 'boolean'){ pass.caps = null; $(pass).next('.caps-lock-warning').hide(); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="password" id="password" /> <span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

注意，只有在按下caps lock键之前知道caps lock的状态时，观察caps lock切换才有用。当前的大写锁定状态由密码元素上的caps JavaScript属性保持。这是当用户按下一个大写或小写字母时，我们第一次验证大写锁定状态时设置的。如果窗口失去焦点，我们就不能再观察到caps锁定切换，所以我们需要重置到未知状态。

基于@joshuahedlund的回答，因为它对我来说很好。

我把代码变成了一个函数，这样就可以重用它，并在我的例子中把它链接到正文。如果您愿意，可以将其链接到密码字段。

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

当您键入时，如果caplock是打开的，它可以自动将当前字符转换为小写字母。这样，即使打开了caplocks，它的行为也不会像在当前页面上那样。为了通知您的用户，您可以显示一个文本，说明caplocks已打开，但表单条目已转换。

在jQuery中,

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

避免类似退格键的错误，需要s. tolowercase () !== s。