使用jQuery检测大写锁定开/关[重复]
Posted
技术标签:
【中文标题】使用jQuery检测大写锁定开/关[重复]【英文标题】：Detect caps lock on/off using jQuery [duplicate] 【发布时间】：2011-01-19 12:22:52 【问题描述】：如何使用 jQuery 检测 Caps Lock 键的开/关？我有一个密码textbox，我只允许使用小写字母，所以我不想打开 Caps Lock 键。
是否可以使用 jQuery 检测 Caps Lock 键的状态？
【问题讨论】：
【参考方案1】：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
然后输入您的密码表单：
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
【讨论】：
@twodayslate +1 也很有价值的答案......但我正在寻找 jquery +1，但为什么要创建kc 和 sk 全局变量？您应该使用var 在函数中声明它们。另外(kc == 16)已经是一个布尔表达式，你不需要把它包装在((kc == 16)?true:false)
+1 非常好，对我很有帮助，谢谢... :)
+1 感谢它在我的项目中帮助了我。【参考方案2】：
有一个jQuery plugin called capslockstate 将监视整个页面上大写锁定键的状态，而不仅仅是在特定字段中。
您可以查询大写锁定键的状态，也可以定义事件侦听器以响应状态变化。
该插件在检测和状态管理方面比这里的其他建议做得更好，包括使用非英语键盘，监控 Caps Lock 键本身的使用，以及在输入非字母字符时不要忘记状态。
有两个演示，one showing basic event binding 和另一个 showing the warning only when the password field has focus。
例如
$(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);
);
和
$(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 plugin 可在 GitHub 上查看。
【讨论】：
这是最完整和可扩展的答案【参考方案3】：但是你忘记了什么。如果你按下 capslock 和 shift 并输入，就不会出现“caps is on”的消息。
这是一个更正的版本：
<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>
【讨论】：
这对我不起作用。我使用了“e.key”而不是“e.which”，它工作正常。对于上下文，我在 Mac 上使用 Chrome【参考方案4】：我找到了使用 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>
【讨论】：
【参考方案5】：我所做的是在何时发出警告
-
用户名或密码不正确，并且
提供的用户名或密码全部大写。
只允许使用较小的字母是一个非常糟糕的主意。这样做可以大大减少可能的密码数量。
【讨论】：
【参考方案6】：用户创建密码后，在登录时输入密码，你可以在服务器上将密码转换为小写，然后再检查是否正确。
这样可以为用户节省精力。
【讨论】：
我认为您不应该更改用户作为密码提交的内容 - 强密码将包含大写和小写字符的混合以上是关于使用jQuery检测大写锁定开/关[重复]的主要内容，如果未能解决你的问题，请参考以下文章