紧接上篇，正太米想要八抬大轿明媒正娶回大家闺秀——Canon IXUS 95 IS，得先准备好聘礼。凑巧今日同住的一只loli（同学的GF，非闪光弹）要过生日，早先曾说过把淘宝上某个商店的泰迪熊送给她，可是却没有银行卡给支付宝付款。今日试了下拉卡拉，很是便捷，只是要付手续费……
充值之后，正太米兴奋地要登录淘宝，输入密码时突然发现页面提示大写锁定键打开了！幸好咱及时更正，要不然又要白输一遍了。记得以前英俊（EyesOnline）曾说过我们能不能也弄一个这样的提示功能，来提升用户体验？俺回答说淘宝人家是装了本地插件才能检测CapsLock，一般页面可没有办法。
时过境迁，如今正太米功力大增，思路扩展也今非昔比，于是乎一款网页版大写锁定键提示功能的想法跃然纸上……
为什么一般页面很难做到？
想要拥有大写锁定键提示功能，很显然，假如安装了本地插件那么键盘相应的状态自然很容易就侦测到了，做出提示功能水到渠成。而想基于网页的话，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代码，只需一个文档类即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<title>capslock</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
body {
margin: 0;
padding: 20px;
background-color: #fff;
font-size: 12px;
line-height: 20px;
}
input {
width: 200px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.tips {
position: absolute;
overflow: hidden;
display: none;
top: 16px;
left: 280px;
padding: 3px 0 0 10px;
*padding-top: 4px;
width: 198px;
height: 23px;
*height: 22px;
background: url(bg.gif) no-repeat 0 0;
color: #f00;
font-weight: 700;
}
</style>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<form>
<label for="pass">密 码：</label><input type="text" id="pass" name="pass" disabled="disabled"/>
<div id="tips" class="tips"></div>
</form>
<script type="text/javascript">
var bFlash = (function(){
var version = ($try(function(){
return navigator.plugins['Shockwave Flash'].description;
}, function(){
return new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
}) || '0 r0').match(/\d+/g);
return (parseInt(version[0] || 0 + '.' + version[1], 10) || 0) >= 9;
})();
var oPass = document.getElementById("pass");
var oTips = document.getElementById("tips");
var oSwf = null;
var sLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var iMode = 0; //0未知，1小写，2大写
function $try(){
for (var i = 0, l = arguments.length; i < l; i++){
try {
return arguments[i]();
} catch(e){}
}
return null;
}
function getSwf() {
if (navigator.appName.indexOf("Microsoft") != -1)
oSwf = window["capslock"];
else
oSwf = document["capslock"];
oPass.disabled = false;
}
function warning() {
oTips.innerHTML = "请注意，您的大写锁定键已打开！";
oTips.style.display = "block";
}
function hide() {
oTips.innerHTML = "";
oTips.style.display = "none";
}
oPass.onfocus= function() {
if(oSwf) {
oSwf.focus();
oSwf.getCapslock();
oPass.focus();
}
}
oPass.onkeydown = function(event) {
event = event || window.event;
var keyCode = event.which || event.keyCode;
if(keyCode == 20) {
if(bFlash) {
oSwf.focus();
oSwf.getCapslock();
oPass.focus();
}
else if(iMode == 1) {
warning();
}
else if(iMode == 2) {
hide();
}
}
}
oPass.onkeypress = function(event) {
if(!oSwf) {
event = event || window.event;
var origin = oPass.value;
var c;
setTimeout(function() {
var now = oPass.value;
for(var i = 0, length = Math.min(origin.length, now.length); i < origin; i++) {
if(origin.charAt(i) !== now.charAt(i)) {
c = now.charAt(i);
break;
}
}
if(!c) {
c = now.charAt(now.length - 1);
}
if(sLetters.indexOf(c) > -1) {
if(event.shiftKey) {
iMode = 1;
hide();
}
else {
iMode = 2;
warning();
}
}
else if(sLetters.toLowerCase().indexOf(c) > -1) {
if(event.shiftKey) {
iMode = 2;
warning();
}
else {
iMode = 1;
hide();
}
}
}, 0);
}
}
if(!bFlash) {
oPass.disabled = false;
}
</script>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="capslock" style="width:1px;height:1px;position:absolute;left:-1px;top:-1px;">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index.swf" />
<embed src="index.swf" quality="high" style="width:1px;height:1px;position:absolute;left:-1px;top:-1px;" name="capslock" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
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浏览器，它能够在本地环境下跳过这个限制，我也不清楚这是为什么……
分享到：
相关推荐
在"JQuery实现输入框大写提示"这个场景中，我们的目标是监听用户在密码输入框中的输入，并在用户输入大写字母时提供提示。这涉及到以下几个关键知识点： 1. **事件绑定**：JQuery的`.on()`方法用于绑定事件处理器。...
3. **性能优化**：为了进一步提升用户体验，可以考虑只在首次检测到大写锁定被启用时才显示提示信息，而不是每次按下大写锁定键都显示。 4. **异常处理**：虽然示例中的代码相对简单，但在实际应用中还需要考虑异常...
2. **触发条件**: 当用户开始在密码输入框中输入字符时，应该立即检测大写锁定键的状态。 3. **提示方式**: 如果检测到大写锁定键被开启，则需要通过某种方式（如弹出提示信息）告知用户当前状态。 4. **响应机制**:...
例如，当用户在密码输入框中输入时，程序需要能够及时反馈大写锁定键的状态，以免用户在不知情的情况下输入了错误的大小写字母。通过易语言提供的功能，开发者可以轻松实现这一功能，提高用户体验。
其中一项提升用户体验的功能就是在用户输入密码时检测大写锁定键的状态，并及时给予提示。这样可以避免用户因为不小心开启了大写锁定而导致密码输入错误，从而减少不必要的重试次数。 #### 二、技术原理 在...
综上所述，通过利用JavaScript的事件监听和键盘事件对象的属性，我们可以实现检测密码输入框中大写锁定键状态的功能。这将有助于提高用户在输入密码时的准确性和安全性，避免因大写锁定键的意外激活而导致的密码错误...
6. 绑定一个`onkeyup`事件处理器到密码输入框，以便当用户释放Caps Lock键时，如果之前检测到大写锁定，则能够显示或隐藏提示信息。 具体到代码层面，`detectCapsLock`函数会检查`event.keyCode`或`event.which`的...
一般用于密码输入时，提示用户键盘处于大写锁定状态。 要判断 shift 是否按下 判断输入字符是否为字母 shift 被按下且输入字符为小写字母，则键盘处于大写锁定状态 shift 没有被按下且输入字符为小写字母，则键盘...
程序通过`CapsLockValue`变量来监控大写锁定的状态，这对于密码输入非常重要，因为它可以帮助用户了解当前输入的是大写字母还是小写字母，从而减少输入错误的可能性。例如： ```javascript var CapsLockValue = 0; ...
大写字母锁定键【Caps Lock】是电脑键盘上的一个锁定键，当Caps Lock键被按下时，键盘上的字母键将被锁定为大写状态。例如，在聊天软件中，需要输入大写字母时，可以按下Caps Lock键，然后输入字母。 卡普死键...
2. 恢复 BIOS 原始功能：在 BIOS 界面下，分别按“Caps Lock（大写锁定）、Num Lock（数码锁定）和 Scroll Lock（滚动锁定）“键，点亮键盘上的 Caps Lock（大写锁定）、Num Lock（数码锁定）和 Scroll Lock（滚动...
5. **特殊功能键**: 虚拟键盘还可能包含退格、回车、锁定大写等特殊功能键。这些键需要有对应的槽函数来处理，比如删除最后一个字符、提交输入或切换大小写。 6. **自定义样式**: 为了提高用户体验，可以使用Qt的...
13. **0x14 CAPSLOCK**：大写锁定键，开启后输入字母将自动转换为大写。 14. **0x1B ESC**：退出键，用于取消当前操作或退出当前界面。 15. **0x20 SPACEBAR**：空格键，用于输入空格或确认某些操作。 16. **0x21 ...
如果需要在用户输入后执行某些操作，可以监听'change'事件，或者在用户离开输入框（'blur'事件）时进行验证。 此外，压缩包中的css文件用于美化界面和调整元素布局。在手机移动端，尤其要注意响应式设计，确保在...
- 可以添加 Caps Lock 提示，以防用户在输入密码时不自觉地开启了大写锁定键。 6. 安全性： - 在实际应用中，确保密码的传输和存储都是安全的，避免被截获或破解。 - 使用SSL/TLS等安全协议保护数据传输。 - ...
3. Caps Lock 键：大写锁定键。按下此键可以切换字母大小写的输入状态，再次按下则恢复小写。注意在中文输入法下，大写状态将无法输入汉字。 4. Shift 键：转换键。它可以与其它键配合使用，如切换大小写，或者在...
功能键在Android键盘中起着关键作用，它们提供特殊功能，如删除、大写锁定、切换输入法等。例如，"Enter"键用于换行，"Shift"键用于切换大小写，"Backspace"用于删除字符。此外，还有一些特定的输入法键，如"Space...
接下来，我们定义了一些变量，如`CapsLockValue`用于记录大写锁定状态，以及`check`用于检查虚拟键盘的位置。`setVariables()`函数用于设置一些尺寸相关的变量，例如键盘的宽度和高度，以及不同浏览器环境下获取窗口...
二、Tab键（转换键）：读音为[太不]，Tab键的主要用途是将光标移动到下一个输入框或按钮。 三、Caps Lock键（键盘转换锁或英文大小写转换键）：读音为[开扑泗喏克]，Caps Lock键的主要用途是切换英文大小写。 四、...
1. 在 BIOS 界面下，分别按 "Caps Lock（大写锁定） 、Num Lock （数码锁定） 和 Scroll Lock（滚动锁定） "键，点亮键盘上的"Caps Lock （大写锁定） 、Num Lock （数码锁定）和Scroll Lock（滚动锁定） "三个灯，...