Fatal编程技术网
  • javascript/
  • 如何使用JavaScript检测页面加载（即，不是按键）上的大写锁定状态？

如何使用JavaScript检测页面加载（即，不是按键）上的大写锁定状态？

javascript forms

如何使用JavaScript检测页面加载（即，不是按键）上的大写锁定状态？,javascript,forms,capslock,Javascript,Forms,Capslock,所以我一直在研究使用JavaScript/jQuery的表单大写锁定检测解决方案。stackoverflow上有一个巨大的线程提供了许多解决方案。但唯一的问题是他们没有检查Caps Lock本身是否被直接按下。它们检测是否输入了大写字母以及是否未按下shift键。这样做的缺点是，在用户开始输入表单之前，我的Caps Lock警告消息不会打开/关闭，这很难达到最佳效果。这是我的密码 document.onkeypress = function(e){ e = e || window.eve

所以我一直在研究使用JavaScript/jQuery的表单大写锁定检测解决方案。stackoverflow上有一个巨大的线程提供了许多解决方案。但唯一的问题是他们没有检查Caps Lock本身是否被直接按下。它们检测是否输入了大写字母以及是否未按下shift键。这样做的缺点是，在用户开始输入表单之前，我的Caps Lock警告消息不会打开/关闭，这很难达到最佳效果。这是我的密码

document.onkeypress = function(e){
    e = e || window.event;
    var s = String.fromCharCode(e.keyCode || e.which);
    if (s.toUpperCase() === s && !e shiftKey) {
        capsWarning.style.visibility = 'visible';
    } else {
        capsWarning.style.visibility = 'hidden';
    }
}
有没有更好的方法，当我按下caps lock键时，用JavaScript触发caps lock消息？也就是说，在我开始输入之前，不要延迟切换消息

与JQuery相比，我更喜欢纯JavaScript解决方案。尽管如果您认为jQuery在这里非常好，请说明原因，我可以向我的同事施压，让我将其包括在这里；o使用
onkeydown
处理程序：

document.onkeypress=function(){console.log(arguments);}
我使用了这段代码并尝试分派一个事件。
getModifierState
不会返回false以外的值。这样，实际上你将发送一个字符，它是“a”或“a”。无论哪种情况，它都将被硬编码

getModifierState
仅在实际按键的情况下返回true

但是在IE 11中有一个自动CapsLock检测（对于
）

我在chrome上测试了这个，它成功了，把这个JavaScript放在标签里

function  loadcaps ( e ) {
     e = e || window.event;
     var s = String.fromCharCode( e.keyCode || e.which );
     if ( s.toUpperCase() === s && !e.shiftKey ) {            
          capsWarning.style.visibility = 'visible';
     } else {
          capsWarning.style.visibility = 'hidden';
     }
  }
把它贴在你的标签上

<body onload="loadcaps()">
让我知道它是否适合您。

使用以下提及代码：

<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>`enter code here`
    <div id="divoff" style="visibility:hidden">Caps Lock is off.</div>


功能盖锁（e）{
kc=e.keyCode？e.keyCode:e.which；
sk=e.shiftKey？e.shiftKey:（（kc==16）？真：假）；

如果((（kc>=65&&kc=97&&kc请重新阅读该问题。它询问如何在不等待按键的情况下执行此操作。我将onkeypress替换为onkeydown。在键入任何内容之前，当我按caps键时，会显示我的caps lock消息。但当我再次按caps时，关闭它，消息仍然存在；o@Quentin那是不可能的，我是在说问题的这一部分：
是否有更好的方法，当我按下caps lock键时，我可以使用JavaScript触发caps lock消息？
lel。实际上，现在无论我按下什么键，caps lock消息都会显示：s@Quentin.不Kenney是对的。至少必须按下Caps Lock。我想知道JavaScript是否可以检测到这一点必须在输入字段中键入。“有没有更好的方法，当我按下caps lock键时，我可以用JavaScript触发caps lock消息？也就是说，在我开始键入之前，不要延迟切换消息[即，例如键入密码]”如果不清楚，很抱歉。有一些场景没有涵盖：如果在加载页面之前caps lock处于活动状态怎么办？好的，在按下一个键之前，不可能获取键盘状态。我的意思是，在我开始在输入字段中键入密码之前，我希望JavaScript检测caps lock是否处于打开状态。因此，是的，必须按下一个键。R现在，用户只有在开始键入登录详细信息后才能知道Caps Lock是否打开。这不是最佳选择。抱歉，这有点混乱。现代浏览器在事件对象中有方法。如果不必支持旧浏览器，可以使用该方法。虽然这也需要一个事件，但您可以通过自己触发事件来实现？Co您能给出一个使用getModifierState（）的更详细示例吗Teemu？@Gaweyne。令人遗憾的是，似乎只有MouseeEvents和KeyboardEvents具有getModifierState方法。对于您的任务来说，一个好的事件应该是
onfocus
，但它的事件对象没有上述方法。而且，如果您通过JS触发一个keydown方法，那么getModifierState（）总是会得到
false
（请参见链接小提琴的第一个版本）。

<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>`enter code here`
    <div id="divoff" style="visibility:hidden">Caps Lock is off.</div>