每当 Caps Lock 键打开时，如何创建从焦点文本框中弹出的工具提示？答案

【问题标题】：How to create a tooltip that popups from a focused textbox whenever the Caps Lock key is on?每当 Caps Lock 键打开时，如何创建从焦点文本框中弹出的工具提示？
【发布时间】：2023-04-04 01:24:01
【问题描述】：

我有一个基于 Web 的登录表单，如果他们的 Caps Lock 键已打开，我想通知用户，尤其是在他们输入密码时。我该怎么做？

类似于：用户输入用户名，然后专注于密码，然后如果大写锁定键打开，工具提示或弹出窗口会显示告诉用户大写键已打开

【问题讨论】：

什么都没试过。我绝对不知道:(
看看这个answer。应该足够开始了。
How do you tell if caps lock is on using JavaScript?的可能重复
我尝试了其中给出的代码，但我收到错误 isCapsLock 未定义。这是什么意思？
我希望在用户将注意力集中在密码文本框时弹出工具提示

标签： javascript jquery html

【解决方案1】：

您可以使用 jQuery 执行以下操作

var CAPS_LOCK = 17; //Constant for caps lock key value

$('#myPasswordField').keypress(function(e) { 
    var keyCode = e.keyCode ? e.keyCode : e.which;
    if ( keyCode === CAPS_LOCK ) {
        alert('Caps lock pressed');
    }
});

有关键值的更多信息：有关键值，请参阅http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html

【讨论】：

如果 caps 键已经“打开”，因此没有单独的键事件怎么办？在 Safari 中，按下 caps lock 不会启动按键事件。
试试这个stackoverflow.com/questions/2308895/…

【解决方案2】：

试试这个插件，你可以在文本框中或直接在整个窗口中监控大写锁定状态：https://github.com/nosilleg/capslockstate-jquery-plugin

【讨论】：

非常感谢@Alberto 先生。这就是我要找的！
如果你想加载一个4000行的库并添加一个100行的插件来完成4行代码的工作……
我已经在使用 JQuery 库，因为我一直在使用 twitter-bootstrap，并且插件中的代码行与链接中给出的答案几乎相同。 ü

【解决方案3】：

目前没有按键事件的标准，似乎也没有指示大写锁定键状态的事件属性，尽管将来可能会提供。

测试大写锁定的唯一合理可靠的方法似乎是查看键代码是否是大写字母并且没有按下 shift 键，例如

function capsLockOn(e) {
  var code = e.keyCode || w.which;

  if (code >64 && code < 97 && !e.shiftKey) {
    return true;
  }
  return false;
}

在某些键盘上，大写锁定仅影响 a 到 z 键，因此您无法可靠地测试其他键盘。按下大写锁定键不会启动按键事件，并且无论如何都不会可靠地工作，因为大写锁定可能会在有机会启动事件之前打开。

或者如果你喜欢简洁：

function capsLockOn(e) {
  var code = e.keyCode || w.which;
  return code > 64 && code < 97 && !e.shiftKey || void 0;
}

【讨论】：

【解决方案4】：

除了 JQuery，您还需要添加 Twitter's Bootstrap 以启用某些效果。这是您的工作代码。

html

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<input type="password" id="myPasswordField" name="myPasswordField" data-content="Caps Lock is on!"></input>

Javascript

$('#myPasswordField').keypress(function (e) {
    var s = String.fromCharCode(e.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
        $this = $(this);
        $this.popover('show').click(function (e) {
            $this.popover('hide');
            e.preventDefault();
        });

    }
});

【讨论】：