ACP*_*ACP 22 passwords jquery capslock
如何使用jQuery打开/关闭Caps Lock键？我有一个密码textbox,我只允许使用小写字母,因此我不希望Caps Lock键打开.
是否可以使用jQuery检测Caps Lock键的状态？
two*_*ate 30
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>
nos*_*leg 13
有一个名为capslockstate的jQuery插件,它将监视整个页面上的大写锁定键的状态,而不仅仅是在特定的字段中.
您可以查询大写锁定键的状态,也可以定义事件侦听器以响应状态更改.
该插件比其他建议更好地进行检测和状态管理,包括使用非英语键盘,监视Caps Lock键本身的使用,如果键入非字母字符则不忘记状态.
有两个演示,一个显示基本事件绑定,另一个仅在密码字段具有焦点时显示警告.
例如
$(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();
});
该插件的代码可在GitHub上查看.
小智 6
但你忘记了什么.如果按下大写锁定并移动并输入,则不会显示"大写已开启"消息.
这是一个更正版本:
<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>
| 归档时间： |
|
| 查看次数： |
43048 次 |
| 最近记录： |