检测大写锁定键(Caps Lock)是否被激活
相信很多人都有过这样的经历，在输入密码时不小心按了大写锁定键(Caps Lock)，导致密码验证屡次错误，甚至一度绝望中。虽然常见的标准键盘有Caps Lock的指示灯来提示，还用IBM的船型Caps Lock键专利(谢谢WINDCY)通过减少表面积和高度来减少输入时误按下以提高效率，但由于该键容易在无察觉下被按下，且功能可以被Shift 键代替，所以有人提出了“撬出Caps Lock键”。
该图来自keso’s photos
撬出大写锁定键肯定很多人舍不得，即使是软件实现也很少有人去做，因此在用户输入密码时如果按下大写锁定键进行提示应该是一个不错的主意。代码如下：
<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>
标签：JavaScript, keyCode, 大写锁定键, 键盘
作者：秦歌，时间:2007-04-16 19:09，归纳于：Javascript & DOM & AJAX，订阅：RSS 2.0，引用：Trackback
Hi, I happen to find Safari has Cap Lock reminder at password field. You can take a look of this picutre: http://www.flickr.com/photos/ifanchou/435800417/
However, I like the way you designed, I think using text is more straightforward.
谢谢，这是一个非常贴心的设计，但是这个用户看到这个图标的时候，是否很容易就知道Caps Lock被激活呢？我想知道，safari下除了这个图标的提示，是否有类似注释的文字提示！本来想装一个Swift试试，但是现在它的网站似乎有问题。
Safari提示不错。lz的文章也不错。
Hi 秦歌,
You’re right, there’s no mouse-over tool tips or any kind of text description around that icon. To be honest with you, first time I saw this icon, I didn’t even know what does it mean until I found the light on my “caps lock” button.
Thanks to point this out, I enjoy reading your blog, and you do have very keen observation. :)
提示在哪里呀？我折怎么用Firefox，IE都不行的了。
你是在演示页面看的么？？我在IE7，Opera，Firefox下都可以看到提示啊？
能不能截个图我看看呀？
因为lock caps按下时Javascript并不能探测到，而其只对输入大小写时有影响，所以看到演示效果是在按下lock caps键输入字母时。
原来是我没有输入任何东西，就想看结果。
我以为能够像Windows XP 登录时那样，只要大小写锁定键打开时就能看到一个提示呢。
贴上来的代码怎么都是这个‘引号的？
不是英文状态下的引号？
这个是个人习惯和风格问题，我之所以用单引号，是因为现在用js处理大量的html代码，而html的属性值是用双引号的，这样就就方便很多,html代码可以直接用。
比如：document.write(’<p class=”example”>例子</p>’);
思路很好