在页面加载（或类似）时检测大写锁定状态答案

【问题标题】：detect caps lock status on page load (or similar)在页面加载（或类似）时检测大写锁定状态
【发布时间】：2011-07-19 07:24:01
【问题描述】：

在我的研究中，我发现了如何在按下大写键时检测大写锁定。但是，即使在未触摸键的情况下，我也想知道大写状态。

示例： alert(ui.Keyboard.capslock) // 将返回 true 或 false；

谢谢！

【问题讨论】：

How do you tell if caps lock is on using JavaScript? 的可能重复项
看起来海报对涉及使用大写按键（我不是）的解决方案感到满意。不过差不多。
哎呀，从外观上看，我完全错过了“即使在没有触摸键的情况下”部分。怀疑这是可能的，但这是一个不同的问题。
是的，我怀疑这也是可能的。我可能最终不得不像其他人一样等到按下一个键:(

标签： javascript keyboard capslock

【解决方案1】：

不，您无法在页面加载时获取键盘按钮的状态。您必须分析按键的 keyCode。这是唯一的方法。

【讨论】：

google 和 yahoo 是怎么做到的呢？如果您查看他们的邮件登录表单等...他们能够在加载时检测到大写锁定？
认真的吗？你能把网址发给我吗？我没有看到大写锁定消息，但现在是星期一和早。其他人在这个线程上告诉我这是不可能的，所以现在我很感兴趣。 stackoverflow.com/questions/9060073/…
@BenCrowhurst ummm - 我在页面加载时看不到它.. (?) 在 Google 上找不到任何东西，但在 yahoo 上，他们确实使用了可以未缩小的代码 (" maxified”？“de-minified”？）并使用更有意义的变量名称最终看起来与this page（链接在 Mike Lewis 的答案中）中概述的解决方案非常相似。
如果您在 Mac 上使用 chrome 或 safari，那么您会看到一个图标，让您知道您按下了大写锁定。这是密码输入字段的标准行为。在 Firefox 中，这不起作用。也许这是一个 webkit 的东西。

【解决方案2】：

我刚刚想出了一个替代方案，它将检测大写锁定状态并将其存储，以便在按下大写锁定键时可以打开和关闭警告。我只为 chrome 45+ 和 ie9+ 编码，所以如果这是您的计划，可能需要对一般用途进行一些调整。

这是我的html：

<input type="text" id="pwd">
<p id="caps"></p>

这是 js：

var LOGINPAGE = LOGINPAGE || {};
LOGINPAGE.CAPSdetect = {};
$(function() {
    LOGINPAGE.CAPSdetect.engage();
});

LOGINPAGE.CAPSdetect.isDetected = false;
LOGINPAGE.CAPSdetect.capsOn = false;

LOGINPAGE.CAPSdetect.engage = function() {
    $('#pwd').on('keypress', LOGINPAGE.CAPSdetect.shiftDetect);
    $(window).on('keydown', LOGINPAGE.CAPSdetect.capsDetect);
}

LOGINPAGE.CAPSdetect.shiftDetect = function(event) {
    var caps = $('#caps');
    var which = event.keyCode;
    var shift = event.shiftKey;
    var targ = event.target;
    if ((which >= 65 && which <= 90 && !shift) || (which >= 97 && which <= 122 && shift)) {
        caps.html('CAPS LOCK IS ON').css('color', 'crimson');
        LOGINPAGE.CAPSdetect.isDetected = true;
        LOGINPAGE.CAPSdetect.capsOn = true;
    } else if((which >= 65 && which <= 90 && shift) || (which >= 97 && which <= 122 && !shift)){
        caps.html('');
    }
}

LOGINPAGE.CAPSdetect.capsDetect = function(event) {
    if(event.keyCode === 20 && LOGINPAGE.CAPSdetect.isDetected) {
        LOGINPAGE.CAPSdetect.capsOn = (LOGINPAGE.CAPSdetect.capsOn)? false:true;
        if(LOGINPAGE.CAPSdetect.capsOn) {
            $('#caps').html('CAPS LOCK IS ON');
        } else {
            $('#caps').html('');
        }
    }
}

我使用命名空间来避免 isDetected 和 capsOn 的全局变量，因此在某些函数和变量之前使用 LOGINPAGE.CAPSdetect.。请参阅this jsfiddle 了解无命名空间并对其进行测试。

【讨论】：

据我所知，这仍然依赖于按下的键，所以这不能回答 OP 的问题。
不，它没有回答 OP 的问题，你是对的。有人已经回答说，“这是不可能的”，据我所知，这是准确的，所以与其让 OP 留下一个开放式的“没办法”，不如说，“嘿，伙计，那个不可能发生，但你可以试试这个......'？您显然发现这是对 SO 的不充分使用，我当然想知道为什么看到人们来到这里是为了解决他们遇到的问题，而不仅仅是“是”或“否”类型的答案。此外，如果您有不依赖按键的解决方案，请发布！保持生产力或不要发布！

【解决方案3】：

试试这个代码：

    <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('divon').style.visibility = 'visible';
   document.getElementById('divoff').style.visibility = 'hidden';
 }else{
  document.getElementById('divon').style.visibility = 'hidden';
   document.getElementById('divoff').style.visibility = 'visible';
}
}
</script>
<input type="text" name="trackcaps" onkeypress="capLock(event)" />
<div id="divon" style="visibility:hidden">Caps Lock is on.</div>
<div id="divoff" style="visibility:hidden">Caps Lock is off.</div>

【讨论】：

聪明的解决方案！这并不完美，但我绝对明白你想要什么。 +1