你如何告诉如果大写锁定使用JavaScript?

但有一个警告:我做了谷歌，我能找到的最好的解决方案是附加一个onkeypress事件到每个输入，然后检查每次按下的字母是否大写，如果是，然后检查shift是否也按下。如果不是，那么caps lock必须是打开的。这感觉真的很脏，而且…浪费——肯定有比这更好的办法吗?

当前回答

试着使用这段代码。

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

祝你好运!

2014-06-01 16:05:21

其他回答

最近在hashcode.com上有一个类似的问题，我创建了一个jQuery插件来处理它。它还支持对数字的大写锁定识别。(在标准德语键盘布局上，大写锁定对数字有影响)。

你可以在这里查看最新版本:jquery.capsChecker

2013-01-01 20:00:30

你可以试试。增加了一个工作示例。当焦点在输入上时，打开caps lock使led变成红色或绿色。(还没有在mac/linux上测试)

注意:两个版本都适用于我。感谢您在评论中提出建设性意见。

旧版本:https://jsbin.com/mahenes/edit?js,output

另外，这是一个修改后的版本(有人能在mac上测试并确认吗)

新版本:https://jsbin.com/xiconuv/edit?js,output

新版本:

function isCapslock(e) {
  const IS_MAC = /Mac/.test(navigator.platform);

  const charCode = e.charCode;
  const shiftKey = e.shiftKey;

  if (charCode >= 97 && charCode <= 122) {
    capsLock = shiftKey;
  } else if (charCode >= 65 && charCode <= 90
    && !(shiftKey && IS_MAC)) {
    capsLock = !shiftKey;
  }

  return capsLock;
}

旧版本:

function isCapslock(e) {
  e = (e) ? e : window.event;

  var charCode = false;
  if (e.which) {
    charCode = e.which;
  } else if (e.keyCode) {
    charCode = e.keyCode;
  }

  var shifton = false;
  if (e.shiftKey) {
    shifton = e.shiftKey;
  } else if (e.modifiers) {
    shifton = !!(e.modifiers & 4);
  }

  if (charCode >= 97 && charCode <= 122 && shifton) {
    return true;
  }

  if (charCode >= 65 && charCode <= 90 && !shifton) {
    return true;
  }

  return false;
}

对于国际字符，可以根据需要为以下键添加额外的检查。你必须获得你感兴趣的字符的键码范围，可能是通过使用一个键映射数组，它将保存你正在寻址的所有有效用例键…

大写字母A-Z或'Ä'， 'Ö'， 'Ü'，小写字母a-Z或0-9或'ä'， 'ö'， 'ü'

上面的键只是示例表示。

2008-12-08 06:30:25

基于@joshuahedlund的回答，因为它对我来说很好。

我把代码变成了一个函数，这样就可以重用它，并在我的例子中把它链接到正文。如果您愿意，可以将其链接到密码字段。

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) { 
    if(e){
        e = e;
    } else {
        e = window.event;
    }
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

2015-02-16 14:02:07

您可以使用KeyboardEvent来检测许多按键，包括最新浏览器上的大写锁。

getModifierState函数将提供以下状态:

Alt AltGraph 大写锁定控制 Fn (Android) 元时键盘上的数字操作系统(Windows & Linux) ScrollLock 转变

这个演示工作在所有主要的浏览器，包括移动(caniuse)。

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

2015-12-14 21:59:47

我写了一个名为capsLock的库，它完全是你想要它做的。

只要把它包括在你的网页上:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

然后像这样使用它:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

参见演示:http://jsfiddle.net/3EXMd/

按下“Caps Lock”键更新状态。它只使用Shift键来确定Caps Lock键的正确状态。最初状态为false。所以要小心。

2014-06-04 13:29:44

你如何告诉如果大写锁定使用JavaScript?

推荐文章

最新文章

标签