试着使用这段代码。

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

祝你好运!

Javascript代码

<script type="text/javascript">
   function isCapLockOn(e){
   kc = e.keyCode?e.keyCode:e.which;
   sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
   if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
       document.getElementById('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

现在我们需要使用Html来关联这个脚本

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div> 

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

你可以试试。增加了一个工作示例。当焦点在输入上时，打开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或'ä'， 'ö'， 'ü'

上面的键只是示例表示。

这里最上面的答案对我来说不适用，有几个原因(未注释的代码带有死链接和不完整的解决方案)。所以我花了几个小时尝试了所有的版本，得到了我能得到的最好的:这里是我的，包括jQuery和非jQuery。

jQuery

注意，jQuery规范化了事件对象，因此缺少了一些检查。我还将其缩小到所有密码字段(因为这是需要它的最大原因)，并添加了一条警告消息。这已经在Chrome, Mozilla, Opera和IE6-8中进行了测试。稳定的，捕获所有的大写锁状态，除非数字或空格被按下。

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

没有jQuery

其他一些无jquery的解决方案缺少IE的备用方案。@Zappa打了补丁。

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

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

注意:查看@Borgar， @Joe Liversedge和@Zappa的解决方案，以及@Pavel Azanov开发的插件，我没有尝试过，但是个好主意。如果有人知道如何扩展a- za -z之外的范围，请编辑掉。此外，这个问题的jQuery版本被关闭为重复，所以这就是为什么我在这里发布这两个问题。

反应

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }