2

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

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

4

4 回答 4

1

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

于 2013-04-25T03:05:41.327 回答
0

您可以使用 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

于 2013-04-25T02:49:51.233 回答
0

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

测试大写锁定的唯一合理可靠的方法似乎是查看键代码是否是大写字母并且没有按下 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;
}
于 2013-04-25T03:21:13.373 回答
0

除了 JQuery，您还需要添加Twitter 的 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();
        });

    }
});
于 2013-04-25T03:38:08.473 回答