如何在 JavaScript 中编写一个好的 Caps Lock 检测解决方案？

Question

找到了这个 Caps Lock 检测解决方案。在这里提琴：https://jsfiddle.net/07ugkacn/11/（谢谢 Armfoot）。 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 重写它，没有 jQuery。如何在没有 jQuery 的情况下重写绑定方法？我尝试将输入字段存储在变量中并写入

passwordInput.onkeyup = function(e) { ... } 

...例如。但无济于事。认为这是阻止此解决方案工作的原因。

请帮忙。

Answer 1

编辑：我自己想出来的

它可能关心的人，在 vanilla JavaScript 中进行大写检测的解决方案。互联网上流传的大多数解决方案的问题是，它们仅在用户开始在输入字段中输入时显示/隐藏警报/弹出窗口。这不是最佳选择，因为在用户关闭 Caps Lock 后“Caps Lock 已打开”通知仍然可见，并且在他们继续键入之前一直如此。这又长又笨，我自己还是不太明白。但我还是推荐它。

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();

Answer 2

Gaweyne, nicely done!我测试了你的纯 JS 代码，我修改了一些你可能会感兴趣的东西：

• 输入时忽略控制字符 (
• 以同样的方式将if (keyCode = 16){替换为if (keyCode === 16){和其他==；
• 使用display 属性而不是visibility (CSS)；
• 始终将 isCapsOn 视为布尔值；
• 调用capsDetected 而不是shiftCaps。

你可以运行下面的sn-p来查看：

function capsDetect() {
  var body = document.getElementsByTagName('body')[0];
  var isShiftPressed = false;
  var isCapsOn = false;
  var capsWarning = document.getElementById('error');
  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) {
        isCapsOn = false;
        capsWarning.style.display = 'none';
      } else {
        isCapsOn = true;
        capsWarning.style.display = 'inline-block';
      }
    }
  });
  body.addEventListener('keypress', function(e) {
    var keyCode = e.keyCode ? e.keyCode : e.which;
    if (keyCode <= 40)
      return;
    if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
      isCapsOn = true;
      capsWarning.style.display = 'inline-block';
    } else {
      capsWarning.style.display = 'none';
    }
  });
}
capsDetect();

body {
  font-family: Arial;
  font-size: 10pt;
}
#error {
  border: 1px solid #FFFF66;
  background-color: #FFFFCC;
  display: inline-block;
  margin-left: 10px;
  padding: 3px;
  display: none;
}

<form action="">
  <input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>

也许更多的调整会使其变得完美......页面加载时仍然存在CAPS LOCK检测：也许通过在后台模拟用户输入会让我们知道，但现在我还没有完全弄清楚呢.

顺便说一句，我以前从未想过这样做，但很明显它可以帮助用户，特别是在密码字段中。事实上，我可能会亲自使用它！所以我真的很感谢你花时间发布这个:)