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

Question

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

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

Answer 1

找到这个有趣.... 你可以试试看..

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'， '0'， 'U'， 小写字母a-Z或0-9或 'A'， 'O'， 'U'

上面的键只是示例的表示。

Answer 2

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

Answer 3

你可以使用 KeyboardEvent 来检测的众多钥匙包括caps lock在最近的浏览器。

的 getModifierState 功能 将提供国家用于：

• Alt
• AltGraph
• 大写锁定
• 控制
• Fn(安卓)
• 元
• 锁定
• OS(Windows和Linux)
• ScrollLock
• 移位

这个演示 在所有主要浏览器，包括移动(caniuse).

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

Answer 4

可以检测盖使用锁定“是字母的大写和没有移位按下”使用文档上的按键捕获。但是，那么你最好确保没有其他的按键处理程序弹出事件泡它会在文档上的处理程序之前。

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')
  }
}

您可以抓住期间支持该浏览器捕获阶段的事件，但似乎有点毫无意义的，因为它不会在所有的浏览器。

予想不到的实际检测大写锁定状态的任何其他方式。支票是简单无论如何，如果非可检测的字符输入一样，以及...然后检测是不必要的。

有 24个方面的文章这去年。相当不错，但缺乏国际字符支持（使用toUpperCase()要解决这个问题）。

Answer 5

许多现有的答案，将检查大写锁定时，不按换挡，但不会检查它，如果你按shift并获得小写，或将检查这一点，但不会同时检查大写锁定键被关闭，或将检查对于但会考虑非字母键为“关闭”。下面是一个适于jQuery的解决方案，如果一个alpha键被按下与帽（移位或不移位），将显示一个警告，将关闭的警告，如果一个alpha键被无帽按压，但不会关闭警告或关闭时号码或其它键被按下。

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

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

Answer 7

在顶部的答案在这里并没有为我工作的一对夫妇的原因（取消注释代码有死链接和一个不完整的解决方案）。所以，我花了几个小时，试图每个人的去，让尽我所能。这里是我的，包括jQuery和非jQuery的

的jQuery

请注意jQuery的归一化的事件对象，以便一些检查丢失。我还就缩小到了所有口令字段（因为这是需要它的最大原因），并增加了一个警告消息。这已经在浏览器，Mozilla，Opera和IE6-8过测试。稳定和捕捉所有的CapsLock状态时被压数字或空格时除外。

/* 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利弗西奇和@Zappa和插件通过@Pavel Azanov，我还没有试过，但是是一个好主意，开发的解决方案。如果有人知道的方式来扩大超出-ZA-Z的范围，请编辑了。此外，这个问题的jQuery的版本被封闭，重复的，所以这就是为什么我张贴都在这里。

Answer 8

我知道这是一个老话题，但想到我会反馈的情况下，它可以帮助别人。该问题的答案似乎都不在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> 

Answer 9

这是一个解决方案是，除了写入时检查状态，也每次切换警告消息的大写锁定键被按压（有一些限制）。

它也支持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>