js如何判断当前用户是否开启大写锁定?

在当密码输入框获得焦点时,获取用户是否开启大写,如果是大写就提示一下, 我知道如果是在输入的过程中大小写的切换是比较容易判断的,但是在获得焦点的时候如何判断呢?

评论 (0)链接2012-02-22 

有个CapsLock.js插件,你可以试试。代码如下:

demo代码:

  
<html>
<head>
<title>CapsLock Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript" charset="utf-8"></script>
<script src="./CapsLock.js?ver=1.0" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var pass = document.id('passcapsnotice'),
user = document.id('usercapsnotice');

function passCapsOn() { pass.setStyle('display', 'block'); }
function passCapsOff() { pass.setStyle('display', 'none'); }

function userCapsOn() { user.setStyle('display', 'block'); }
function userCapsOff() { user.setStyle('display', 'none'); }

document.id('username').addEvents({
'capsLockOn': userCapsOn,
'capsLockOff': userCapsOff,
'blur': userCapsOff,
'focus': function(event) {
if (event.hasCapsLock()) { userCapsOn(); }
}
});

document.id('password').addEvents({
'capsLockOn': passCapsOn,
'capsLockOff': passCapsOff,
'blur': passCapsOff,
'focus': function(event) {
if (event.hasCapsLock()) { passCapsOn(); }
}
});

});
</script>
<style type="text/css">
form {
width: 500px;
margin: 0 auto;
}
.label { width: 60px; }
.field { width: 260px; }
.notice {
display: none;
line-height: 2em;
margin-top: .5em;
padding: 0;
}
</style>
</head>

<body>
<form>
<fieldset>
<legend>Login</legend>
<table>
<tbody>
<tr>
<td class="label"><label for="username">Username:</label></td>
<td class="field"><input type="text" id="username" name="username" class="title" /></td>
<td><span id="usercapsnotice" class="notice">Caps On.</span></td>
</tr>
<tr>
<td class="label"><label for="password">Password:</label></td>
<td class="field"><input type="password" id="password" name="password" class="title" /></td>
<td><span id="passcapsnotice" class="notice">Caps On.</span></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>

插件CapsLock.js,你粘贴下来保存到demo同目录下。代码如下:
(function() {

Browser.CapsLock = null;
var capsOn = null,
target = (Browser.Engine.trident) ? document : window;

/**
* Figure out if caps lock is on by checking for a lower case letter with shift
* pressed or an uppercase letter without shift. Once we know if it is on/off,
* remove the event listener.
*/
function checkCapsKey(event) {
if (event.code > 64 && event.code < 91) { // Capital Letters
Browser.CapsLock = capsOn = (event.shift) ? null : true;
} else if (event.code > 96 && event.code < 123) { // Lower-case Letters
Browser.CapsLock = capsOn = (event.shift) ? true : false;
}

if (capsOn !== null) {
target.removeEvent('keypress', checkCapsKey);
}
}

/**
* If user moves away from the window, we can't tell what happened with the caps
* key when he returns so we reset the caps checker.
*/
window.addEvent('blur', function(event) {
Browser.CapsLock = capsOn = null;
target.addEvent('keypress', checkCapsKey);
});

/**
* Checks an event for caps lock key presses. If it's Safari 3+, keyup means caps lock
* is off and keydown means caps lock is on. Otherwise just toggle the value of capsOn.
*/
function checkCapsPress(event) {
if (event.code == 20 && capsOn !== null) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
Browser.CapsLock = capsOn = (event.event.type == 'keydown');
} else {
if (event.event.type == 'keydown') {
Browser.CapsLock = capsOn = !capsOn;
}
}
}
}

/**
* Add events to the target to monitor for caps lock key presses and to do
* the initial caps lock key sniffing.
*/
target.addEvents({
'keyup': checkCapsPress,
'keydown': checkCapsPress,
'keypress': checkCapsKey
});

Event.implement({ hasCapsLock: function(event) { return capsOn; } });

Element.Events.capsLockOn = {
base: 'keydown',
condition: function(event) {
if (event.code == 20) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
return true;
} else if (capsOn !== null) {
return !capsOn;
}
} else if (capsOn !== null) {
return event.hasCapsLock();
}
}
};

Element.Events.capsLockOff = {
base: (Browser.Engine.webkit) ? 'keyup' : 'keydown',
condition: function(event) {
if (event.code == 20) {
if (Browser.Engine.webkit && Browser.Engine.version > 420) {
return true;
} else if (capsOn !== null) {
return (capsOn === true);
}
} else if (capsOn !== null) {
return !event.hasCapsLock();
}
}
};

})();
小飞
小飞
6842
编辑于 2012-03-02
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (1)链接 • 2012-02-22
  • 0 支持
    您好,这个js文件下载不了,http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js – 王二彪 2016-11-01

目前是做不到,不知道通过flash可否获得?
还有不知道大家都关注html5,ie10预览版已经将这个功能实现,相信其他支持html5的浏览器也能实现,下边是一张演示图:
请输入图片描述

冯义军
冯义军
14.03K
编辑于 2012-02-23
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-02-23

JavaScript只提供对键盘的监听事件,它无法获取客户端硬件信息(IE下可以通过ActiveXObject对象获得),更无法获得客户端硬件的状态,这是JavaScript语言的限制,所以它只能监听用户对键盘的响应事件,才能判断用户当前的按键是处于大小还是小写状态。目前网络上所有判断大小写都是监听用户的按钮才能得以判断

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-02-23

来自:http://dancewithnet.com/lab/2007/04/detect-caps-lock/
<script type="text/javascript">//<![CDATA[

  
function  detectCapsLock(event){
var e = event||window.event;
var o = e.target||e.srcElement;
var oTip = o.nextSibling;
var keyCode = e.keyCode||e.which; // 获取按键的keyCode
var isShift = e.shiftKey ||(keyCode == 16 ) || false ;
// 判断shift键是否按住
if (
((keyCode >= 65 && keyCode <= 90 ) && !isShift)
// Caps Lock 打开,且没有按住shift键
|| ((keyCode >= 97 && keyCode <= 122 ) && isShift)
// Caps Lock 打开,且按住shift键
){oTip.style.display = '';}
else{oTip.style.display = 'none';}
}
document.getElementById('password').onkeypress = detectCapsLock;
//]]></script>

这是个演示地址:http://dancewithnet.com/lab/2007/04/detect-caps-lock/

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (6)链接 • 2012-02-22
  • 0 支持
    像windows的开机输入密码就是那种,还有qq也是。不知道是怎么做到的。 – zhupp 2012-02-23
  • 0 支持
    在Windows是系统和QQ是客户端当然可以获取用户电脑的硬件信息,但是JavaScript行不通,这是语言的限制 – 浪际天涯 2012-02-23
  • 0 支持
    是啊,提前如果获取不到硬件信息,又没有按键触发怎么获取到 – 崔苔吾 2012-02-23
  • 0 支持
    在js层,实现这样的提示 已经够OK了 – 大人 2012-02-26
显示更多隐藏的评论

不是您所需,查看更多相关问题与答案

德问是一个专业的编程问答社区,请 登录注册 后再提交答案