BlogJava-Oo缘来是你oO-随笔分类-Java Script

用JavaScript检查大写键（Caps Lock）是否打开（原创）

马嘉楠 — Thu, 01 Feb 2007 07:21:00 GMT

用JavaScript检查大写键（Caps Lock）是否打开（原创）

马嘉楠 2007年2月1日

新年第一篇！希望新的一年大家和我一样天天开心，能多学点东西，多多赚钱^-^

在用户遇到需要输入密码的页面时候，密码中是否有大写字母？大写键（Caps Lock）是否打开？如果能给用户以提示，岂不是更好？

下面的示例代码给出了方法，必要的说明代码当中都有注释。
问中知识点：event.keyCode 和 event.shiftKey
如果有不对，不明白地方或者有更好的建议，请告诉我！谢谢^+^

HTML页面代码

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > Detect Caps Lock TITLE >
< script >
function detectCapsLock(e){
    valueCapsLock = e.keyCode ? e.keyCode:e.which; // Caps Lock　是否打开
    valueShift = e.shiftKey ? e.shiftKey:((valueCapsLock == 16 ) ? true : false ); // shift键是否按住

     if (((valueCapsLock >= 65 && valueCapsLock <= 90 ) && ! valueShift) // Caps Lock 打开，并且 shift键没有按住
     || ((valueCapsLock >= 97 && valueCapsLock <= 122 ) && valueShift)) // Caps Lock 打开，并且按住 shift键
        document.getElementById('capStatus').style.visibility = 'visible';
     else
        document.getElementById('capStatus').style.visibility = 'hidden';

   /*
  javascript中keyCode代码对应表
  event.keyCode=32        空格
  event.keyCode=13        回车
  event.keyCode=27        Esc
  event.keyCode=16)        Shift
  event.keyCode=17)        Ctrl
  event.keyCode=18)        Alt
   */

}
script >
HEAD >

< BODY >
< input type ="password" name ="pwd" onkeypress ="detectCapsLock(event)" />
< div id ="capStatus" style ="visibility:hidden" >< font color =red > Caps Lock is on. < font > div >
BODY >
HTML >

马嘉楠 2007-02-01 15:21 发表评论

简单的密码验证控件

马嘉楠 — Thu, 07 Dec 2006 03:25:00 GMT

简单的密码验证控件

马嘉楠 2006-12-07

最近一直在忙,不过忙得很充实,学到了很多东西,准备一点一点整理.
这个密码验证很简单,作为一个独立的控件,可以拿来直接用^+^

pwd.html

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > 密码修改 TITLE >
HEAD >
< script language ="javascript" >
// 密码修改
function CheckUpdatePwd(text){
     if ( ! confirm( " 确认修改密码? " ))
         return ;
     var newpwd = window.showModalDialog('confirmpwd.htm', "" , " dialogWidth: 280px; dialogHeight: 150px; help: no; status: no " );
     if (newpwd == "" || newpwd == null ) {
        alert( " 密码没有修改! " );
         return true ;
    } else {;
        text.value = newpwd;
         return ;
    }
}
script >

< BODY >
< table id ="pwdTable" width ="100%" height ="100%" border ="0" cellspacing ="2" cellpadding ="0" >
< tr >
< td align ="right" width ="75" > 客户密码： td >
< td > < input type ="password" datafld ="cust_pwd" name ="cust_pwd" style ="border:1px solid #CCCCCC; font-size:12px; background-color:#FFFFFF; width:135px" onFocus ="CheckUpdatePwd(this)" maxlength ="6" >
< font color ="#FF0000" > ＊ font > td >
tr >
table >
BODY >
HTML >

confirmpwd.htm

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
< link href ="../../css/all_import.css" rel =stylesheet >
< title > 密码修改 title >
< script language ="JavaScript" type ="text/JavaScript" >
function modifyPwd() {
     var newPwd         = document.all( " newPwd " ).value;
     var confirmPwd     = document.all( " confirmPwd " ).value;

     if (newPwd.length == 0 ) {
        alert( " 请输入新密码! " );
         return ;
    } else if (newPwd.length != confirmPwd.length){
        alert( " 密码长度不一致,请重新输入! " );
        resetConfirmPwd();
         return ;
    } else if (newPwd != confirmPwd) {
        alert( " 两次输入的密码不一致,请重新输入! " );
        resetConfirmPwd();
         return ;
    } else {
        alert( " 密码修改成功! " )
        window.returnValue = newPwd;
            window.close();
    }
}

function resetConfirmPwd(){
    document.all.newPwd.value = "" ;
    document.all.confirmPwd.value = "" ;
}
script >
head >
< body bgcolor ="#f0f0f0" >
< table width ="100%" border ="0" cellpadding ="0" cellspacing ="0" >
   < tr >
     < td colspan ="3" align ="right" > td >
   tr >
   < tr >
       < td > td >
     < td width ="100" align ="right" style ="border:1px solid #CCCCCC; font-size:12px;" > 请输入新密码： td >
     < td width ="120" > < input name ="newPwd" type ="password" id ="newPwd" maxlength ="6" style ="width:135px" > td >
     < td > td >
   tr >
   < tr >
       < td > td >
     < td width ="100" align ="right" style ="border:1px solid #CCCCCC; font-size:12px;" > 请确认新密码： td >
     < td width ="120" > < input name ="confirmPwd" type ="password" id ="confirmPwd" maxlength ="6" style ="width:135px" > td >
     < td > td >
   tr >
table >
< table width ="100%" height ="60" border ="0" cellpadding ="0" cellspacing ="0" >
   < tr align ="center" >
     < td > td >
     < td width ="65" > < input name ="ok" type ="button" class ="btn_70" id ="ok" value ="确定" onClick ="modifyPwd()" > td >
     < td width ="15" > td >
     < td width ="65" > < input name ="reset" type ="button" class ="btn_70" id ="reset" value ="重置" onClick ="resetConfirmPwd()" > td >
     < td width ="15" > td >
     < td width ="65" > < input name ="close" type ="button" class ="btn_70" id ="close" value ="关闭" onClick ="window.close()" > td >
     < td > td >
   tr >
table >
body >
html >

马嘉楠 2006-12-07 11:25 发表评论

如何让你的程序运行的更快（2）--- JavaScript中的数组之字符串下标的运用

马嘉楠 — Thu, 09 Nov 2006 08:44:00 GMT

摘要: 如何让你的程序运行的更快（2）--- JavaScript中的数组之字符串下标的运用 ... 阅读全文

马嘉楠 2006-11-09 16:44 发表评论

JavaScript中的Boolean，你了解多少？

马嘉楠 — Mon, 30 Oct 2006 15:41:00 GMT

JavaScript中的Boolean，你了解多少？
马嘉楠 2006-10-30

今天看了一下Flyingis写的《ECMAScript 基础》一文。在看到 Boolean类这一块内容的时候，随手写了几行代码，问题出现了^+^
注：此文讨论的是JavaScript1.5

还是先来看一段非常简单的代码

// code：1
var x = false ;
var y = true ;

// code：2
var xObject = new Boolean( false );
var yObject = new Boolean( true );

// code：3
var resX = new Boolean(x);
var resY = new Boolean(y);

// code：4
var resXObject = new Boolean(xObject);
var resYObject = new Boolean(yObject);

// code：5
alert( " resX = " + resX + " and resY = " + resY);
alert( " resXObject = " + resXObject + " and resYObject = " + resYObject);

你明白code：1~4 之间的区别么？（你一定对code：1最为熟悉，这是我们最常用的）
你知道code：5 的输出结果么？（可以先想想，在运行代码看结果，如果不明白，可以继续看下去）

如果你已经开始头晕了，那就暂时不去想了，看我下面的解释。
如果你都知道了（哇，高手啊，呵呵^+^），那我还有个问题需要你的解答，在此先谢过了。

正文：
JavaScript中的Boolean类型

1.   我们所熟悉的

var x = false;
var y = true;

这是我们大家都熟悉的，此时我们使用的是原始的Boolean值（the primitive Boolean values ）true和false

2.   我们很少用到的

var xObject = new Boolean(false);
var yObject = new Boolean(true);

此时我们声明了一个Boolean对象，Boolean对象是对Boolean值的一个封装。
Boolean对象：一个值为true或false的Boolean对象。

原始的Boolean值和Boolean对象是有区别的，不要相互混淆，引用Core JavaScript 1.5 Reference中的一句话：Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object.

3.   区别

区别（1）：   声明形式

区别（2）：   在条件语句（condition statement）中

var x = false;
var xObject = new Boolean(false);

if(x)
    alert("x = true");
else
    alert("x = false");

if(xObject)
    alert("xObject = " + xObject + ", but in the condition statement, the xObject value is evaluated to true");
else
    alert("xObject = false");

输出结果：

x = false
xObject = false, but in the condition statement, the xObject value is evaluated to true

当一个值为false的Boolean对象放到条件语句当中的时候，Boolean对象的值会被当作true来计算，但是它本身的值并没有改变，依然是false。很有趣，我只知道现象，具体原因不清楚，不知道发明者出于什么地考虑。但是在JavaScript1.2或者更早的版本中却有所不同，在条件语句（condition statement）中，Boolean对象的计算返回的是其对应的原始Boolean的值。

区别（3）：初始化Boolean对象

声明一个Boolean对象，如果我们用一个值为false的Boolean对象对其进行初始化，则新的Boolean对象的值为true

var xObject = new Boolean(false);
var resXObject = new Boolean(xObject);
alert("The resXObject value is " + resXObject);

原始的Boolean值和Boolean对象区别如此之大，所以切记二者区别，不要混淆使用。

对于code：5 的输出结果，你现在明白是什么原因了吧。

上面的东东我也是今天遇到了问题，查了一些资料才知道，学无止境啊。可是我的问题依然没有解决。
我的问题是关于Boolean对象的初始化。代码如下，

var ob1 = new Boolean(false);
var ob2 = (ob1&&true);
var ob3 = (true&&ob1);
var ob4 = Boolean(ob1&&true);
var ob5 = Boolean(true&&ob1);
alert("ob2 = " + ob2 + " ob3 = " + ob3 + " ob4 = " + ob4 + " ob5 = " + ob5);

结果：

ob2 = true ob3 = false ob4 = true ob5 = true

我对ob2 和 ob3的结果不太理解，为什么我只是更改了ob1和true的顺序，结果去完全不同了。并且可以发现，结果均等于操作符“&&”后面的值。

希望大家能告诉我！

问题已经解决：

||是这样运算的：从第一个开始，遇到有意义的返回，否则返回最后一个表达式（注意不一定是Boolean值）；

&&是这样运算的：从第一个开始，遇到无意义的返回，否则返回最后一个表达式（注意同上）；

!是这样运算的：对表达式的值取非（注意不是对表达式）。

什么是无意义呢：如下六个 0,null,undefined,"",false,NaN。除此，视为有意义。

new Boolean(),new Boolean(false)是同一个东西，由于它是一个对象，故是有意义的，但其值为false，所以，可以看为“有意义的false”，所以结果为最后一个表达式的值。

谢谢 jeffjie

继续学习^+^

马嘉楠 2006-10-30 23:41 发表评论

JavaScript For Beginners（转载）

马嘉楠 — Wed, 25 Oct 2006 06:26:00 GMT

摘要: JavaScript For Beginners By Nongjian Zhou . ... 阅读全文