使用 jQuery 检测大写锁定开/关
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2308895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect caps lock on/off using jQuery
提问by ACP
How can I detect the Caps Lock key on/off using jQuery? I have a password textbox, and I allow only lowercase letters so I don't want the Caps Lock key to be on.
如何使用 jQuery 检测 Caps Lock 键的开/关？我有一个 password textbox，我只允许使用小写字母，所以我不想打开 Caps Lock 键。
Is it possible to detect the state of Caps Lock key using jQuery?
是否可以使用 jQuery 检测 Caps Lock 键的状态？
回答by twodayslate
How to detect Caps Lock with Javascript.
function capLock(e){
var kc = e.keyCode ? e.keyCode : e.which;
var sk = e.shiftKey ? e.shiftKey : kc === 16;
var visibility = ((kc >= 65 && kc <= 90) && !sk) ||
((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';
document.getElementById('divMayus').style.visibility = visibility
}
Then for your password form:
然后对于您的密码表单：
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
回答by nosilleg
There is a jQuery plugin called capslockstatethat will monitor the state of the caps lock key over the entire page, not just in specific fields.
有一个名为 capslockstate的jQuery 插件，它将监视整个页面上大写锁定键的状态，而不仅仅是在特定字段中。
You can either query the state of the caps lock key or define event listeners to react to state changes.
您可以查询大写锁定键的状态或定义事件侦听器以对状态更改做出反应。
The plugin does a better job of detection and state management than the other suggestions here, including working with non-English keyboards, monitoring the use of the Caps Lock key itself, and not forgetting the state if non alpha characters are typed.
该插件在检测和状态管理方面比这里的其他建议做得更好，包括使用非英语键盘，监控 Caps Lock 键本身的使用，以及在输入非字母字符时不要忘记状态。
There are two demos, one showing basic event bindingand another showing the warning only when the password field has focus.
有两个演示，一个显示基本事件绑定，另一个显示仅当密码字段具有焦点时的警告。
e.g.
例如
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
$("#statetext").html("on");
});
$(window).bind("capsOff", function(event) {
$("#statetext").html("off");
});
$(window).bind("capsUnknown", function(event) {
$("#statetext").html("unknown");
});
/*
* Additional event notifying there has been a change, but not the state
*/
$(window).bind("capsChanged", function(event) {
$("#changetext").html("changed").show().fadeOut();
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
// Call the "state" method to retreive the state at page load
var initialState = $(window).capslockstate("state");
$("#statetext").html(initialState);
});
and
和
$(document).ready(function() {
/*
* Bind to capslockstate events and update display based on state
*/
$(window).bind("capsOn", function(event) {
if ($("#Passwd:focus").length > 0) {
$("#capsWarning").show();
}
});
$(window).bind("capsOff capsUnknown", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusout", function(event) {
$("#capsWarning").hide();
});
$("#Passwd").bind("focusin", function(event) {
if ($(window).capslockstate("state") === true) {
$("#capsWarning").show();
}
});
/*
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();
});
The code for the pluginis viewable on GitHub.
该插件的代码可在 GitHub 上查看。
回答by TheTimmaeh
But you forgot something. If you press capslock and shift and type, there won't be the message 'caps is on'.
但是你忘记了一些东西。如果您按大写锁定键并按 Shift 和键入，则不会出现“大写已打开”的消息。
Here is a corrected version:
这是一个更正的版本：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="Javascript">
$(document).ready(function(){
$('input').keypress(function(e) {
var s = String.fromCharCode( e.which );
if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) ||
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)){
if($('#capsalert').length < 1) $(this).after('<b id="capsalert">CapsLock is on!</b>');
} else {
if($('#capsalert').length > 0 ) $('#capsalert').remove();
}
});
});
</script>
</head>
<body>
<label style="float:left;display:block;width:80px;">Login:</label><input type="text" /><br />
<label style="float:left;display:block;width:80px;">Password:</label><input type="password" /><br />
</body>
回答by Arthur F
I found a better way to do this using jquery: this way you can detect when the user press capslock, the user doesn't need to type a letter to check: (the user needs to type at least 1 key to start detecting the capslock) demo: http://arthurfragoso.onphp.net/codes/capslock.html
我找到了一个使用 jquery 的更好方法：这样你可以检测用户何时按下大写锁定，用户不需要输入字母来检查：（用户需要输入至少 1 个键来开始检测大写锁定) 演示：http: //arthurfragoso.onphp.net/codes/capslock.html
<html><head><title>Checking Caps Lock using Jquery - Javascript</title></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form action="/codes/capslock.html" id="formid">
<div>
User:
</div>
<div>
<input type="text" id="user" />
</div>
<div>
Password:
</div>
<div>
<input type="password" id="password" />
</div>
<div id="capslockdiv" style="display: none; color: red;">
Caps Lock On
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
$(document).ready(
function () {
check_capslock_form($('#formid')); //applies the capslock check to all input tags
}
);
document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
e = e || event;
if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
if (typeof (window.capsLockEnabled) !== 'undefined') {
if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
window.capsLockEnabled = !window.capsLockEnabled;
$('#capslockdiv').toggle();
}
window.lastpress = e.timeStamp;
//sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem
}
};
function check_capslock(e) { //check what key was pressed in the form
var s = String.fromCharCode(e.keyCode);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
window.capsLockEnabled = true;
$('#capslockdiv').show();
}
else {
window.capsLockEnabled = false;
$('#capslockdiv').hide();
}
}
function check_capslock_form(where) {
if (!where) { where = $(document); }
where.find('input,select').each(function () {
if (this.type != "hidden") {
$(this).keypress(check_capslock);
}
});
}
</script>
</body>
</html>
回答by Pointy
What I do is put up a warning when
我所做的是在什么时候发出警告
- the username or password is incorrect and
- the username or password provided was all upper-case.
- 用户名或密码不正确并且
- 提供的用户名或密码都是大写的。
It's a pretty bad idea to only allow smaller letters. You're cutting down the number of possible passwords by a tremendous amount by doing that.
只允许使用较小的字母是一个非常糟糕的主意。通过这样做，您可以大量减少可能的密码数量。
回答by Paul D. Waite
After the user has created their password, when they're entering it during login, you could just convert it to lowercase on the server before checking whether it's correct.
用户创建密码后，当他们在登录时输入密码时，您可以在服务器上将其转换为小写，然后再检查它是否正确。
Saves effort for the user that way.
这样可以为用户省力。
