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 on on”通知在用户关闭Caps Lock后仍然可见，并且在他们恢复键入之前一直保持通知。这是漫长而笨拙的，我自己还是不太了解它。但我推荐它一样。

yAxis: {
  /*
  ...
  */,
  offset: -30
},

Answer 2

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

在键入时忽略控制字符（＆lt; = 40），例如方向键和删除键;
以同样的方式将if (keyCode = 16){替换为if (keyCode === 16){和其他==;
使用display属性而不是visibility（CSS）;
将isCapsOn视为布尔值，始终为
称为capsDetected而不是shiftCaps。

您可以运行下面的代码段来查看它：

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检测：也许通过在后台模拟用户输入会告诉我们，但是现在我还没有完全弄清楚它

不过，我之前从未想过这样做，但很明显它可以帮助用户，特别是在密码字段中。事实上，我可能会亲自使用它！所以我非常感谢你发布这篇文章的时间：）

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

2 个答案: