你如何告诉如果大写锁定使用JavaScript?

但有一个警告:我做了谷歌,我能找到的最好的解决方案是附加一个onkeypress事件到每个输入,然后检查每次按下的字母是否大写,如果是,然后检查shift是否也按下。如果不是,那么caps lock必须是打开的。这感觉真的很脏,而且…浪费——肯定有比这更好的办法吗?


当前回答

最近在hashcode.com上有一个类似的问题,我创建了一个jQuery插件来处理它。它还支持对数字的大写锁定识别。(在标准德语键盘布局上,大写锁定对数字有影响)。

你可以在这里查看最新版本:jquery.capsChecker

其他回答

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

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

您可以在支持捕获阶段的浏览器中捕获事件,但这似乎没有意义,因为它不会在所有浏览器上工作。

我想不出任何其他方法来检测caps锁定状态。检查很简单,如果输入了不可检测的字符,那么……那么检测就没有必要了。

去年有一篇关于24种方法的文章。非常好,但缺乏国际字符支持(使用toUpperCase()来解决这个问题)。

在JQuery。这涵盖了Firefox中的事件处理,并将检查意外的大写字母和小写字符。这预设了一个<input id="password" type="password" name="whatever"/>元素和一个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();
    }
});

jQuery:

$('some_element').keypress(function(e){
       if(e.keyCode == 20){
             //caps lock was pressed
       }
});

这个jQuery插件(代码)实现了与Rajesh的回答相同的想法,更简洁一点。

这是一种解决方案,除了在写入时检查状态外,还在每次按下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锁定切换,所以我们需要重置到未知状态。

我知道有点晚了,但是,这对别人是有帮助的。

所以这里是我最简单的解决方案(土耳其字符);

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