你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌，我能找到的最好的解决方案是附加一个onkeypress事件到每个输入，然后检查每次按下的字母是否大写，如果是，然后检查shift是否也按下。如果不是，那么caps lock必须是打开的。这感觉真的很脏，而且…浪费——肯定有比这更好的办法吗?
当前回答
如何使用getModifierState()
如果指定了修饰符，getModifierState()方法返回true 按键被按下或激活。
你可以这样使用它:
function checkIfCapsLockIsOn(event) {
var capsLockIsOn = event.getModifierState("CapsLock");
console.log("Caps Lock activated: " + capsLockIsOn);
}
这将简单地检查CapsLock是ON还是OFF，并在控制台显示它。你可以改变函数的工作方式。
然后在keydown或keyup上使用这个函数。
<input type="text" onkeydown="checkIfCapsLockIsOn(event)">
其他回答
试着使用这段代码。
$('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
});
祝你好运!
基于@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>
您可以使用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
});
这里最上面的答案对我来说不适用，有几个原因(未注释的代码带有死链接和不完整的解决方案)。所以我花了几个小时尝试了所有的版本，得到了我能得到的最好的:这里是我的，包括jQuery和非jQuery。
jQuery
注意，jQuery规范化了事件对象，因此缺少了一些检查。我还将其缩小到所有密码字段(因为这是需要它的最大原因)，并添加了一条警告消息。这已经在Chrome, Mozilla, Opera和IE6-8中进行了测试。稳定的，捕获所有的大写锁状态，除非数字或空格被按下。
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var $warn = $(this).next(".capsWarn"); // handle the warning mssg
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
$warn.show();
} else {
$warn.hide();
}
}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");
没有jQuery
其他一些无jquery的解决方案缺少IE的备用方案。@Zappa打了补丁。
document.onkeypress = function ( e ) {
e = (e) ? e : window.event;
var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
alert("CAPSLOCK is on."); // do your thing here
} else {
// no CAPSLOCK to speak of
}
}
注意:查看@Borgar， @Joe Liversedge和@Zappa的解决方案，以及@Pavel Azanov开发的插件，我没有尝试过，但是个好主意。如果有人知道如何扩展a- za -z之外的范围，请编辑掉。此外，这个问题的jQuery版本被关闭为重复，所以这就是为什么我在这里发布这两个问题。
所以我找到了这个页面，并不是很喜欢我找到的解决方案，所以我想出了一个，并把它提供给你们所有人。对我来说，只有当我输入字母时，大写锁才重要。这段代码为我解决了问题。它快速和简单，给你一个辣椒变量引用，只要你需要它。
let capsIsOn=false; let capsChecked=false; let capsCheck=(e)=>{ let letter=e.key; if(letter.length===1 && letter.match(/[A-Za-z]/)){ if(letter!==letter.toLowerCase()){ capsIsOn=true; console.log('caps is on'); }else{ console.log('caps is off'); } capsChecked=true; window.removeEventListener("keyup",capsCheck); }else{ console.log("not a letter, not capsCheck was performed"); } } window.addEventListener("keyup",capsCheck); window.addEventListener("keyup",(e)=>{ if(capsChecked && e.keyCode===20){ capsIsOn=!capsIsOn; } });
