如何创建一个工具提示，该工具提示在按下大写锁定键时从聚焦文本框弹出

How to create a tooltip that popups from a focused textbox whenever the Caps Lock key is on?

本文关键字：工具提示 锁定 写锁 文本 聚焦 创建 何创建 一个      更新时间：2023-09-26

我有一个基于web的登录表单，我想通知用户他们的Caps Lock键是否打开，特别是当他们输入密码时。我该怎么做呢?

例如:用户输入用户名，然后关注密码然后如果大写锁键打开，一个工具提示或弹出窗口显示告诉用户大写键打开

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

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

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

测试大写锁定的唯一合理可靠的方法似乎是查看键代码是否为大写字母并且没有按下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;
}

与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();
        });
    }
});
相关文章：