你如何判断大写锁定是否在使用 JavaScript？答案

【问题标题】：How do you tell if caps lock is on using JavaScript?你如何判断大写锁定是否在使用 JavaScript？
【发布时间】：2010-09-25 19:34:07
【问题描述】：

如何使用 JavaScript 判断大写锁定是否开启？

但有一个警告：我用谷歌搜索了它，我能找到的最佳解决方案是将onkeypress 事件附加到每个输入，然后每次检查按下的字母是否为大写，如果是，则检查是否 shift也被按住了。如果不是，则必须打开大写锁定。这感觉真的很脏而且只是...... 浪费 - 肯定有比这更好的方法吗？

【问题讨论】：

因为我的很多用户都像这样填写他们的表格。
@nicf：如果是这个原因，为什么不在输入上运行一个正则表达式，如果大写字母太多，请他们停止喊叫？
这样做有更好的理由。如果用户正在输入密码，那么在他们的大写锁定打开时警告他们将非常有用。
当用户输入input type=password 字段时，浏览器似乎应该实现“大写锁定”警告（类似于在 chrome 中对input type=email 进行电子邮件地址验证等）
很好的问题，但接受的答案是 8 岁。更好的回复是here

标签： javascript keyboard capslock

【解决方案1】：

在 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。

【讨论】：

实际上... fromCharCode 消除了我检查的需要。但是应该注意的是 keydown 和 keypress 给出不同的字符码，这是我首先出错的地方。
-1 bc 仅当他们在 CAPS 开启时没有按 shift 时才有效。
如果有人想查看带有引导程序的实时示例，您可以在此处查看bootply.com/91792
这个答案对我很有用。由于@D_N 提到的缺陷，我改进了this answer 中的条件，即按下shift 时它不起作用。
但是如果它只在文档加载时打开呢？

【解决方案2】：

您可以使用KeyboardEvent 检测多个键，包括最新浏览器上的大写锁定。

getModifierState function 将提供以下状态：

Alt
AltGraph
大写锁定
控制
Fn (Android)
元
数字锁定
操作系统（Windows 和 Linux）
滚动锁定
换档

This demo 适用于所有主流浏览器，包括移动设备 (caniuse)。

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

【讨论】：

我在一个欺骗/类似问题上回答了这个问题，并由另一位用户更新，现在支持 Chrome。我确认了这一点，所以现在可以在所有主要浏览器上使用 - 并且应该是这个问题的最佳解决方案
caniuse.com/#search=getModifierState 表示目前 Safari 不支持它（还没有？）。因此，所有主流浏览器可能还不是这样。
Safari 现已支持。
但它检测到大写锁定按下并且在用户输入表单时无法获得一般大写锁定状态...
这似乎有效，除非将大写锁定键按到 off 位置。在下一次按键之前，它不会接收该输入。这是在 Chrome for OS X 上。不确定这是否跨越浏览器和操作系统。

【解决方案3】：

您可以尝试一下。添加了一个工作示例。当焦点放在输入上时，打开大写锁定会使 LED 变为红色，否则变为绿色。（没有在mac/linux上测试过）

注意：两个版本都适合我。感谢 cmets 的建设性意见。

旧版本：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 或 'ä'、'ö'、'ü'

以上键只是示例表示。

【讨论】：

这可能不是最好的实现，但是当我写它时，我试图让它保持简单。我认为你可以真正做到这一点的唯一方法是你需要为不同的浏览器覆盖。
我发现将它与 keydown （在 chrome 中）一起使用会导致所有代码都被提取为大写字母。如果我使用按键它可以工作。
为所有国际字符寻找每个可能的字符组合注定会错过一些情况。改用 toUpper/Lower case 方法来检查大小写。
令人惊讶的是，一个完全错误的答案 - 混淆 charcodes 和 ascii (!!!)- 可以得到这么多的支持。没有人检查过？？？
请注意，according to Mozilla, event.which 已从 Web 标准中删除。

【解决方案4】：

您可以使用文档上的按键捕获来检测大写锁定，使用“是字母大写并且没有按下 shift”。但是你最好确保没有其他按键处理程序在事件气泡到达文档上的处理程序之前弹出事件气泡。

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

您可以在支持该功能的浏览器中在捕获阶段捕获该事件，但这似乎毫无意义，因为它不适用于所有浏览器。

我想不出任何其他实际检测大写锁定状态的方法。无论如何，检查很简单，如果输入了不可检测的字符，那么......那么检测就没有必要了。

去年有an article on 24 ways。相当不错，但缺乏国际字符支持（使用toUpperCase() 来解决这个问题）。

【讨论】：

这实际上是我想要的。这适用于拉丁文和西里尔文字符串。谢谢！
这很好用，但是像 SPACE 和数字这样的键会提示警告。知道（同样简洁/优雅的）解决方法吗？
另外，你注意到不完整很好，但它仍然不完整。不知道如何用这种方法解决这个问题。
@Bordar：在移动浏览器上的实际 android 设备上不起作用！

【解决方案5】：

许多现有答案将在未按下 shift 时检查大写锁定，但如果您按 shift 并变为小写，则不会检查它，或者会检查但不会检查大写锁定是否关闭，或者会检查为此，但会将非字母键视为“关闭”。这是一个经过调整的 jQuery 解决方案，如果按下大写字母键（移位或不移位）将显示警告，如果按下字母键而没有大写字母将关闭警告，但不会关闭或打开警告数字或其他键被按下。

$("#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)
  });

【讨论】：

【解决方案6】：

在 JQuery 中。这涵盖了 Firefox 中的事件处理，并将检查意外的大写和小写字符。这预设了一个 <input id="password" type="password" name="whatever"/>element 和一个 id 为“capsLockWarning”的单独元素，其中包含我们想要显示的警告（但在其他情况下被隐藏）。

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});

【讨论】：

我不知道为什么，但是这种方法在第一次按键时不起作用（仅在 Chrome 上测试过）。
会不会是空字段隐藏问题？我无法让它正常工作，至少在 Chrome 中是这样。它会在许多其他浏览器中自动发生（至少在我的版本中，如下所示），因为退格键会计算并清除 mssg。
注意：正如您在此处正确使用的那样，您需要使用keypress 事件来在输入时使用不同的大小写，因为两者都是keydown and keyup will always return uppercase。因此，这不会 fire the capslock key ...如果您打算与 e.originalEvent.getModifierState('CapsLock') 结合使用

【解决方案7】：

这里的最佳答案对我不起作用有几个原因（带有死链接和不完整解决方案的未注释代码）。所以我花了几个小时尝试每个人，尽我所能：这是我的，包括 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 版本已作为重复项关闭，所以这就是我在此处发布两者的原因。

【讨论】：

一个好的解决方案应该始终包括对英文字母 A-Z 之外的字母的支持。任何其他解决方案都是对几乎所有非英语语言的侮辱。
在移动浏览器上的实际android设备上不起作用！

【解决方案8】：

我们使用getModifierState 来检查大写锁定，它只是鼠标或键盘事件的成员，因此我们不能使用onfocus。密码字段获得焦点的最常见两种方式是单击或选项卡。我们使用onclick 来检查输入中的鼠标点击，我们使用onkeyup 来检测前一个输入字段中的选项卡。如果密码字段是页面上的唯一字段并且是自动聚焦的，那么在释放第一个键之前事件不会发生，这可以但并不理想，您真的希望在密码字段获得后显示大写锁定工具提示重点，但在大多数情况下，这个解决方案就像一个魅力。

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq

【讨论】：

太棒了！在我的实现中简单、简洁、完美。
@Ryan：感谢您的贡献！这是一个很好、干净的代码示例，尽管我想指出您的答案与 2015 年的 Mottie's reply 基本相同，你们都使用 event.getModifierState("CapsLock").
@Ryan：在移动浏览器上的实际 android 设备上不起作用！

【解决方案9】：

我知道这是一个老话题，但我想我会反馈一下，以防它帮助其他人。这个问题的答案似乎都不适用于 IE8。然而，我确实找到了在 IE8 中工作的代码。（还没有测试过任何低于 IE8 的东西）。如果需要，可以为 jQuery 轻松修改。

function capsCheck(e,obj){ 
    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('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

并且通过 onkeypress 事件调用该函数，如下所示：

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>

【讨论】：

感谢 IE8 修复。将其合并到我重新编写的答案中（如下）。不过，这很可靠。

【解决方案10】：

这是一种解决方案，除了在写入时检查状态外，还可以在每次按下 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 JavaScript 属性保存。这是我们第一次验证大写锁定状态时设置的，当用户按下一个可以是大写或小写的字母时。如果窗口失去焦点，我们将无法再观察到大写锁定切换，因此我们需要重置为未知状态。

【讨论】：

好主意。如果您要向用户显示大写锁定已打开的警告，最好在大写锁定被禁用时立即关闭该警告，否则您可能会混淆用户。

【解决方案11】：

最近hashcode.com上有一个similar question，我创建了一个jQuery插件来处理它。它还支持数字大写锁定的识别。（在标准德语键盘布局中，大写锁定对数字有影响）。

您可以在这里查看最新版本：jquery.capsChecker

【讨论】：

【解决方案12】：

对于带有 twitter 引导的 jQuery

检查以下字符的大写锁定：

大写AZ或'Ä'、'Ö'、'Ü'、'!'、'"'、'§'、'$'、'%'、'&'、'/'、'('、 ')', '=', ':', ';', '*', '''

小写 a-Z 或 0-9 或 'ä'、'ö'、'ü'、'.'、','、'+'、'#'

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

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // 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 ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

live demo on jsfiddle

【讨论】：

在移动浏览器上的实际android设备上不起作用！

【解决方案13】：

显示大写锁定状态的变量：

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

适用于所有浏览器 => canIUse

【讨论】：

赞成对旧问题提供最新答案。您可能想要添加类似标题的内容，例如“对于现代浏览器 (2017->) 试试这个”或“2017 年更新”

【解决方案14】：

@user110902 发布的This jQuery-based answer 对我很有用。但是，我对其进行了一些改进，以防止@B_N 的评论中提到的缺陷：当您按下 Shift 时，它未能检测到 CapsLock：

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

像这样，即使按下 Shift 也能正常工作。

【讨论】：

【解决方案15】：

无论大小写或按下 shift 键，此代码都会检测大写锁定：

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

【讨论】：

这会导致空格和退格在 Firefox 上检测为大写。

【解决方案16】：

我编写了一个名为 capsLock 的库，它完全可以满足您的需求。

只需将其包含在您的网页中：

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

然后按如下方式使用：

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

查看演示：http://jsfiddle.net/3EXMd/

当您按下 Caps Lock 键时，状态会更新。它仅使用 Shift 键破解来确定 Caps Lock 键的正确状态。最初状态为false。所以要小心。

【讨论】：

这是一个非常巧妙的解决方案。但是它有一个错误，如果在页面获得焦点时 Caps Lock 处于打开状态，“capslock”对象会以不正确的状态（关闭）开始。
确实是从不正确的状态开始的。但是，当您按下任何键时，它会自动更正其状态。如果您能找到一种方法在页面获得焦点时将其设置为正确状态，那么我将非常乐意合并您的代码。

【解决方案17】：

另一个版本，清晰而简单，处理转换的 capsLock，并且我认为不限于 ascii：

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

编辑： capsLockOn 的感觉被颠倒了，doh，修复了。

编辑#2：在进一步检查后，我做了一些更改，不幸的是，代码更详细一些，但它可以适当地处理更多操作。

使用 e.charCode 代替 e.keyCode 并检查 0 值会跳过许多非字符按键，而无需编码特定于给定语言或字符集的任何内容。据我了解，它的兼容性稍差，因此较旧的、非主流浏览器或移动浏览器的行为可能与此代码预期的不同，但无论如何，对于我的情况来说，这是值得的。
检查已知标点代码列表可防止它们被视为漏报，因为它们不受大写锁定的影响。如果没有这个，当您键入任何这些标点符号时，大写锁定指示器会被隐藏。通过指定排除集而不是包含集，它应该与扩展字符更兼容。这是最丑陋、最特别的一点，非西方语言有可能有足够不同的标点符号和/或标点符号代码会成为问题，但在 IMO 中，至少对我的情况而言，这也是值得的。

【讨论】：

【解决方案18】：

反应

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;
            }
        }
    }

【讨论】：

【解决方案19】：

基于@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>

【讨论】：

【解决方案20】：

Mottie's 和 Diego Vieira's response 以上是我们最终使用的，现在应该是公认的答案。然而，在我注意到它之前，我写了这个不依赖字符代码的小javascript函数......

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

然后像capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)这样在事件处理程序中调用它

但同样，我们最终只使用了 @Mottie 和 @Diego Vieira 的回复

【讨论】：

【解决方案21】：

如何使用 getModifierState()

如果指定修饰符，getModifierState() 方法返回 true 键被按下或激活。

你可以像这样使用它：

function checkIfCapsLockIsOn(event) {
  var capsLockIsOn = event.getModifierState("CapsLock");
  console.log("Caps Lock activated: " + capsLockIsOn);
}

这将简单地检查 CapsLock 是 ON 还是 OFF 并将其显示在控制台中。你可以改变你想要的函数的工作方式。

然后在 keydown 或 keyup 上使用此功能。

<input type="text" onkeydown="checkIfCapsLockIsOn(event)">

【讨论】：

【解决方案22】：

在下面的代码中，当 Caps 锁定并且他们使用 shift 按键时，它会显示警报。

如果我们返回 false；那么当前字符将不会附加到文本页面。

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

【讨论】：

只有在大写锁定打开时才有效。如果大写锁定关闭，它仍然报告大写锁定已打开，但按下了 shift 键（无论是否实际按下了 shift 键）。
好吧对不起@awe

【解决方案23】：

试试这个简单易懂的代码

这是脚本

 <script language="Javascript">
function capLock(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('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

还有 HTML

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

【讨论】：

【解决方案24】：

尝试使用此代码。

$('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
});

祝你好运:)

【讨论】：

【解决方案25】：

这是一个使用 jquery ui 的自定义 jquery 插件，由该页面上的所有好想法组成，并利用了工具提示小部件。大写锁定消息会自动应用所有密码框，并且不需要更改您当前的 html。

自定义插件代码...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style="white-space: nowrap;"/>')
                        .append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // 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)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

应用于所有密码元素...

$(function () {
    $(":password").capsLockAlert();
});

【讨论】：

【解决方案26】：

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>

【讨论】：

【解决方案27】：

我知道已经很晚了，但这可能对其他人有所帮助。

所以这是我最简单的解决方案（使用土耳其字符）；

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

【讨论】：

【解决方案28】：

所以我找到了这个页面，但我并不喜欢我找到的解决方案，所以我想出了一个并提供给大家。对我来说，只有在我输入字母时大写锁定是否打开才重要。这段代码为我解决了这个问题。它既快速又简单，并为您提供了一个 capsIsOn 变量以供您在需要时参考。

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if(letter.length===1 && letter.match(/[A-Za-z]/)){
        if(letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if(capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});

【讨论】：

【解决方案29】：

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

【讨论】：

是的，但是您仍然需要检测大写锁定。另外，这意味着您不允许密码中使用大写字母，这是次优的。
要检测是否开启了大写锁定，您必须检查您发送的字符的小写版本是否与它不同，如果是-->大写锁定，则«警告：您正在使用大写锁定，但我们的系统正在转换为小写»，我想 javascript 毕竟并不是要检测大写锁定（检查大写锁定需要系统访问权限），您必须找到最适合您需要的方法

【解决方案30】：

检测大写锁定有一个更简单的解决方案：

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}

【讨论】：