0

我正在尝试检测 Javascript 中的大写锁定，但是下面的代码总是返回 false。Firefox 和 IE 网络控制台说 kc 和 sk 是未定义的。Event "e"似乎包含一个 which 元素，但是e.which未定义。

我做错了什么吗？我正在使用 devexpress（这可能是个问题吗？）

Javascript

 <script>
    function isCapslock(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))
          return true;
      else
          return false; 
      }

函数 showCapsWarning(e) {

        if (isCapslock(e)) {
            document.getElementById("capsWarningDiv").style.visibility = 'visible';
        }
        else {
            document.getElementById("capsWarningDiv").style.visibility = 'hidden';
        }

    }
</script>

.aspx 文件

<dx:ASPxTextBox ID="tbPassword" runat="server" ClientInstanceName="tbPassword" Password="True"                                              ToolTip="Please enter your password."
        Width="300px"  
        ClientSideEvents-KeyPress="function(s,e) {showCapsWarning(e); }"
                                                    >

这是我从以下位置获得大写锁定 javascript 代码的地方：http: //www.codeproject.com/Articles/17180/Detect-Caps-Lock-with-Javascript

4

2 回答 2

0

e.which 在 Web 开发人员控制台中未定义。我注意到事件对象使用以下路径来访问 which 元素：event.htmlEvent.which。一旦我使用e.htmlEvent它就开始正常工作。

于 2013-11-06T20:11:00.357 回答
0

我想有点晚了，但检查一下这个codepen：https ://codepen.io/sarkiroka/full/qBbpKYY

主要思想是自 2017 年以来，每个浏览器都支持键盘和鼠标事件上的 getModifierState。选中此布尔值以显示或隐藏红色警告区域。

let input = document.getElementById('password');
input.addEventListener('keyup', checkCapsLock);
input.addEventListener('mousedown', checkCapsLock);
let previousStateOfCapsLock=false;
function handleWarning(show){
  document.getElementById('capsLockWarning').style.display=show?'block':'none';
}
function checkCapsLock(event) {
    let isCaps = event.getModifierState('CapsLock');
  if (previousStateOfCapsLock && event.key=='CapsLock') { // now turn it off
    isCaps = false;
  }
  previousStateOfCapsLock = isCaps;
  handleWarning(isCaps);
}
.error {
  display: none;
  color: red;
  font-weight: bold;
}
<input id="password" type="password" placeholder="Enter your password"></input>
<p class="error" id="capsLockWarning">
  The Caps Lock is ON!
</p>

于 2020-07-03T11:26:13.340 回答