密码输入框之大写锁定键提示

为什么一般页面很难做到大小写锁定的检测？

想要拥有大写锁定键提示功能，很显然，假如安装了本地插件那么键盘相应的状态自然很容易就侦测到了，做出提示功能水到渠成。而想基于网页的 话，js还没有足够强大的能力来应付，只能做到一点点：在密码框按键或输入时侦测按键代码。凭此想要弄出相同功能的大写锁定键提示的话，明显是不可能的， 只有另辟蹊径了。

跳出局限思维

既然js不能胜任，那么flash呢？目前网页上可用的技术有很多，但普遍的无非这两种：js和as。as是有能力检测大写锁定键的（flash.ui.Keyboard类），那么我们便可借助它来完成。

不过这里有个难题，那就是flash player想要检测按键，必须在激活的状态下才行。也就是说密码输入框需要做成flash，这可是我们不愿意看到的，那么有其它的办法吗？

解决之道

问题的回答是：当然有！结合js和as来做的话，这一问题便迎刃而解！可是有人又要问了：假如用户没有安装flash player 9及以上的怎么办，或者版本太低怎么办（即使fp9的普及率已经相当高）？不要急，综合考虑的结果是为安装flash player 9及以上版本的人提供全面的大写锁定键检测功能，没有安装的提供部分检测功能，如此便完善了很多。

详细思路

首先用户分为2种：安装flash player 9及以上版本的没有安装的。

假如安装了的用户在密码输入框输入密码时，onfocus和每个按键都会被侦测，一旦按键的keyCode是20（CapsLock的键 值），那么便会通过ExternalInterface调用as3的接口，判断Keyboard.capsLock的值true或false，再回调js 函数来显示或隐藏提示框。当然做这一切之前需要将焦点移至flash上，做完之后焦点移回密码框。

假如没有安装的用户只能部分体验到它的功能。依旧我们会侦听按键的onkeydown和onkeypress，两者区别是前一个包括功能键， 后一个只侦测输入。并且我们设置了一个mode变量以区分大写锁定键为打开、关闭以及未知的情况。这样在已知mode的情况下，按下CapsLock键就 能知晓其是否被打开了；而未知mode的情况下就需判断输入的字母的大小写并且是否同时按下了shift键来判断是否给予大写锁定键提示。

具体代码

以下蓝色的为网页代码包括html，红色的为as3代码，只需一个文档类即可。

密  码：







 

package {
import flash.display.Sprite;
import flash.ui.Keyboard;
import flash.external.ExternalInterface;

public class Main extends Sprite {
  public function Main():void {
   if (ExternalInterface.available) {
    ExternalInterface.addCallback("getCapslock", getCapslock);
    ExternalInterface.call("getSwf");
   }
  }
  public function getCapslock():void {
   if (Keyboard.capsLock) {
    if (ExternalInterface.available) {
     ExternalInterface.call("warning");
    }
   }
   else {
    if (ExternalInterface.available) {
     ExternalInterface.call("hide");
    }
   }
  }
}
} 

后话

当然，其中不完善之处甚多，比如用以获取用户输入的字母是用了延迟侦听，而非获取索引范围之类的办法（因为这方面偶的标准化还不熟），希望你 能提出更好的建议。而且fp9以后本地浏览会出现跨域安全性限制，这让测试非常麻烦，所以正太米一直使用maxthon浏览器，它能够在本地环境下跳过这 个限制，我也不清楚这是为什么……

原文：http://army.iteye.com/blog/469059