如何判断是否使用 JavaScript 启用了大写锁定？
但有一个警告：我确实在谷歌上搜索过它，我能找到的最佳解决方案是将一个onkeypress事件附加到每个输入，然后每次检查按下的字母是否为大写，如果是，则检查 shift 是否也被按下。如果不是，则必须打开大写锁定。这感觉真的很脏而且只是......浪费- 肯定有比这更好的方法吗？
如何判断是否使用 JavaScript 启用了大写锁定？
IT技术
javascript
keyboard
capslock
2021-01-23 23:34:33
6个回答
在 jQuery 中，
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
避免错误，例如s.toLowerCase() !== s需要退格键 。
您可以使用 aKeyboardEvent来检测许多键，包括最新浏览器上的大写锁定。
该getModifierState函数将为以下各项提供状态：
- Alt
- 替代图
- 大写锁定
- 控制
- Fn (安卓)
- 元
- 数字键盘（的第一个键
- 操作系统（Windows 和 Linux）
- 滚动锁定
- 转移
此演示适用于所有主要浏览器，包括移动 ( caniuse )。
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
你可以试一试..添加了一个工作示例。当焦点在输入上时，打开大写锁定会使 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;
}
对于国际字符，可以根据需要对以下键添加额外的检查。您必须获得您感兴趣的字符的键码范围，可能是通过使用键映射数组来保存您正在寻址的所有有效用例键...
大写 AZ 或“Ä”、“Ö”、“Ü”、小写 aZ 或 0-9 或“ä”、“ö”、“ü”
上述键只是示例表示。
您可以使用文档上的按键捕获使用“是字母大写且未按下移位”来检测大写锁定。但是你最好确保在事件气泡到达文档上的处理程序之前没有其他按键处理程序弹出事件气泡。
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
您可以在支持该事件的浏览器的捕获阶段捕获该事件，但这似乎没有意义，因为它不适用于所有浏览器。
我想不出任何其他方式来实际检测大写锁定状态。无论如何，检查很简单，如果输入了不可检测的字符，那么……那么检测就没有必要了。
去年有一篇关于 24 种方式的文章。很好，但缺乏国际角色支持（toUpperCase()用来解决这个问题）。
许多现有的答案会在没有按下 shift 时检查大写锁定，但如果你按下 shift 并得到小写，则不会检查它，或者会检查它但也不会检查大写锁定是否关闭，或者会检查，但是会将非 alpha 键视为“关闭”。这是一个经过调整的 jQuery 解决方案，如果按大写字母键（移位或不移位），将显示警告，如果按不带大写字母的 alpha 键将关闭警告，但不会关闭或打开警告数字或其他键被按下。
$("#password").keypress(function(e) {
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)) {
$("#CapsWarn").show();
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$("#CapsWarn").hide();
} //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)
});