你怎么知道使用JavaScript是否打开大写锁定？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你怎么知道使用JavaScript是否打开大写锁定？相关的知识，希望对你有一定的参考价值。
你怎么知道使用javascript是否打开大写锁定？
但有一点需要注意：我确实谷歌了，我能找到的最佳解决方案是将onkeypress事件附加到每个输入，然后每次检查按下的字母是否为大写，如果是，则检查是否也按住了班次。如果不是，那么必须打开大写锁定。这感觉很脏，只是......浪费 - 肯定有比这更好的方法吗？
发现这个有趣......你可以尝试一下..
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或'ä'，'ö'，'ü'
以上键只是示例表示。
我们使用getModifierState来检查大写锁定，它只是鼠标或键盘事件的成员，所以我们不能使用onfocus。密码字段获得焦点的最常见的两种方式是单击或选项卡。我们使用onclick来检查输入中的鼠标单击，我们使用onkeyup来检测前一个输入字段中的选项卡。如果密码字段是页面上唯一的字段并且是自动聚焦的，那么事件将不会发生，直到第一个键被释放，这是好的但不理想，你真的希望一旦密码字段获得显示大写锁定工具提示专注，但在大多数情况下，这个解决方案就像一个魅力。
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
https://codepen.io/anon/pen/KxJwjq
最近在hashcode.com上有一个similar question，我创建了一个jQuery插件来处理它。它还支持识别数字大写锁定。 （在标准德语键盘布局上，大写锁定对数字有影响）。
你可以在这里查看最新版本：jquery.capsChecker
对于带有twitter bootstrap的jQuery
检查已锁定以下字符的大写字母：
大写AZ或'Ä'，'Ö'，'Ü'，'！'，'''，'§'，'$'，'％'，'＆'，'/'，'（'，'）' ，'='，'：'，';'，'*'，'''
小写字母a-Z或0-9或'ä'，'ö'，'ü'，'。'，'，'，'+'，'＃'
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var kc = e.which; // get keycode
var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','
// 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 ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
$(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
} else {
$(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
}
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");
显示大写锁定状态的变量：
let isCapsLockOn = false;
document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
适用于所有浏览器=> canIUse
无论大小写还是按下shift键，此代码都会检测大写锁定：
$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});
我写了一个名为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键hack来确定Caps Lock键的正确状态。最初的状态是false。所以要小心。
另一个版本，清晰简单，处理移位的capsLock，而不是限制为ascii我认为：
document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];
编辑：capLockOn被反转，doh，修复。
编辑＃2：在更多地检查之后，我做了一些更改，遗憾的是更详细的代码，但它适当地处理了更多的操作。
- 使用e.charCode而不是e.keyCode并检查0值会跳过许多非字符的按键，而无需编写特定于给定语言或字符集的任何内容。根据我的理解，它的兼容性稍差，因此较旧，非主流或移动浏览器的行为可能与此代码所期望的不同，但无论如何，这对我的情况来说是值得的。
- 检查已知标点符号列表可防止它们被视为漏报，因为它们不受大写锁定的影响。如果没有这个，当您键入任何标点符号时，大写锁定指示符将被隐藏。通过指定排除的集合而不是包含的集合，它应该与扩展的字符更兼容。这是最丑陋，最特殊的一点，并且非西方语言有一些机会有足够不同的标点符号和/或标点符号作为问题，但同样值得IMO，至少在我的情况下。
应对
onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}
onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}
<div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>
function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;
component.lastKeyPressed = key;
if( key === 'Shift') {
component.shift = true;
}
if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
re以上是关于你怎么知道使用JavaScript是否打开大写锁定？的主要内容，如果未能解决你的问题，请参考以下文章