如何用JavaScript编写一个好的大写锁定检测解决方案？

找到此Caps Lock检测解决方案。在这里拉小提琴：（谢谢你的手臂）。JS/jQuery代码如下：

$(function () {
    var isShiftPressed = false;
    var isCapsOn = null;
    $("#txtName").bind("keydown", function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which;
        if (keyCode == 16) {
            isShiftPressed = true;
        }
    });
    $("#txtName").bind("keyup", function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which;
        if (keyCode == 16) {
            isShiftPressed = false;
        }
        if (keyCode == 20) {
            if (isCapsOn == true) {
                isCapsOn = false;
                $("#error").hide();
            } else if (isCapsOn == false) {
                isCapsOn = true;
                $("#error").show();
            }
        }
    });
    $("#txtName").bind("keypress", function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which;
        if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
            isCapsOn = true;
            $("#error").show();
        } else {
            $("#error").hide();
        }
    });
});

。。。例如但是没有用。我想这就是阻止这个解决方案工作的原因

---

请帮忙，谢谢

编辑：我自己想出来的

对于它可能关心的人来说，一个在普通JavaScript中检测caps的解决方案。互联网上的大多数解决方案的问题在于，它们仅在用户开始在输入字段中键入时显示/隐藏警报/弹出窗口。这不是最佳选择，因为在用户关闭Caps Lock之后，“Caps Lock is on”（大写锁定已打开）通知仍然可见，并且在用户恢复键入之前一直可见。这是一个漫长而笨拙的过程，我自己也不太明白。但我还是推荐它

function capsDetect() {
  var body = document.getElementsByTagName('body')[0];
  var isShiftPressed = false;
  var isCapsOn = null;
  var capsWarning = document.getElementById('caps-lock-warning');
  body.addEventListener('keydown', function(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which;
  if (keyCode = 16){
   isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
 var keyCode = e.keyCode ? e.keyCode : e.which;
 if(keyCode == 16) {
   isShiftPressed = false;
}
 if(keyCode == 20) {
  if(isCapsOn == true) {
   isCapsOn = false;
   capsWarning.style.visibility = 'hidden';
} else if (isCapsOn == false) {
  isCapsOn = true;
  capsWarning.style.visibility = 'visible';
}
}
});
body.addEventListener('keypress', function(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which;
  if(keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
    isCapsOn = true;
    capsWarning.style.visibility = 'visible';
} else {
    capsWarning.style.visibility = 'hidden';
}
});
}
shiftCaps();

函数capsDetect（）{
var body=document.getElementsByTagName（'body'）[0]；
var=false；
var isCapsOn=null；
var capsWarning=document.getElementById（'caps-lock-warning'）；
正文.addEventListener（'keydown'，函数（e）{
var-keyCode=e.keyCode？e.keyCode:e.which；
如果（键代码=16）{
IsShift=true；
}
});
正文.addEventListener（'keyup'，函数（e）{
var-keyCode=e.keyCode？e.keyCode:e.which；
if（keyCode==16）{
IsShift=false；
}
如果（键代码==20）{
如果（isCapsOn==true）{
isCapsOn=false；
capsWarning.style.visibility='hidden'；
}else if（isCapsOn==false）{
isCapsOn=true；
capsWarning.style.visibility='visible'；
}
}
});
正文.addEventListener（'keypress'，函数（e）{
var-keyCode=e.keyCode？e.keyCode:e.which；
如果（keyCode>=65&&keyCode！我测试了你的纯JS代码，我修改了一些东西，你可能会觉得有趣：


键入时忽略了控制字符（为什么不检查两个字母是否为大写字母？如果你不喜欢这种解决方案，请找出capslock的键码，并检查其是否处于打开状态。用户需要知道，在单击输入时，而不是在开始键入后，caps lock是否处于打开状态。问题是ps lock消息在用户关闭caps lock后显示，并且只有在用户键入至少一个字符后才会隐藏。这远远不是理想的。我控制C'eed和V'eed的解决方案非常适合我的需要。我只需要在纯JavaScript中使用它，而不需要JQuery。我的同事不希望我在项目中使用JQuery来最小化当这个特定页面加载时加载的脚本。所以，是的，这就是我想要的。要翻译这个。很多对我来说似乎相当明显，如果没有jQuery，它将如何重新编写。我认为这是绑定函数的问题。如果你能告诉我如何重新编写所说的绑定函数，你将赢得今天的interwebs。还有脚本ly检查所写的第一个字母是否为大写，并按下shift.。如果不是大写，则大写为开；）好了，你可以把这个和我上面提到的另外两个条件结合起来，你可以自己做。如果你展示了你尝试过的代码，你会更容易帮助你。给onkeypress分配一个函数就是这样做的，所以如果你想知道为什么它不适合你，你必须展示更多的代码。嘿，谢谢你的改进！：D我会将此保存到某个地方，以便在其他地方执行另一个大写锁定通知。老实说，在博客上修改我喜欢的解决方案纯粹是愚蠢的运气。现在我有一天时间来考虑它，尽管我明白我建议其他人做的事情
function capsDetect() {
  var body = document.getElementsByTagName('body')[0];
  var isShiftPressed = false;
  var isCapsOn = null;
  var capsWarning = document.getElementById('caps-lock-warning');
  body.addEventListener('keydown', function(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which;
  if (keyCode = 16){
   isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
 var keyCode = e.keyCode ? e.keyCode : e.which;
 if(keyCode == 16) {
   isShiftPressed = false;
}
 if(keyCode == 20) {
  if(isCapsOn == true) {
   isCapsOn = false;
   capsWarning.style.visibility = 'hidden';
} else if (isCapsOn == false) {
  isCapsOn = true;
  capsWarning.style.visibility = 'visible';
}
}
});
body.addEventListener('keypress', function(e) {
  var keyCode = e.keyCode ? e.keyCode : e.which;
  if(keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
    isCapsOn = true;
    capsWarning.style.visibility = 'visible';
} else {
    capsWarning.style.visibility = 'hidden';
}
});
}
shiftCaps();