input文字判断效果

经典原文地址http://bbs.blueidea.com/thread-3037858-1-1.html

在这里我改善了一下，就是即使是密码输入框，也能显示明文。这是仿163邮箱的做法。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7     input{ width:200px; height:24px; line-height:24px; border:1px solid #999; background:#ccc; margin:15px 0 0 100px; padding:4px; color:#666;}
 8     .current{ background:#E0FEE4; border:1px solid #093;}
 9     #pwdPlaceHolder { position:absolute; top:20px; left:107px; color:#666; font-size:12px; line-height:24px; }
10 </style>
11 </head>
12 
13 <body>
14     <input name="" type="text"  value="请输入姓名："/><br />
15     <div style="position:relative;">
16         <input type="password" name="" id="pwd" />
17         <label for="pwd" id="pwdPlaceHolder">请输入密码：</label>
18     </div>
19     <input name="" type="text"  value="请输入昵称："/><br />
20     <input name="" type="text"  value="输入验证码："/><br />
21     <input name="" type="text"  value="请输入手机号码："/><br />
22     <input name="" type="text"  value="请输入电子邮件："/>
23 
24     
25     <script type="text/javascript">
26         var aInp=document.getElementsByTagName('input');
27         var i=0;
28         var sArray=[];
29         var pwdLabel = document.getElementById("pwdPlaceHolder");
30         var pwdInput = document.getElementById("pwd");
31         
32         for(i=0; i<aInp.length; i++)
33         {
34             aInp[i].index=i;
35             sArray.push(aInp[i].value);
36             
37             aInp[i].onfocus=function()
38             {
39                 if(this.id === "pwd") {
40                     if(pwdLabel.firstChild.nodeValue && !this.value) {
41                         pwdLabel.firstChild.nodeValue = "";
42                     }
43                 }
44                 
45                 if(sArray[this.index]==aInp[this.index].value)
46                 {
47                     aInp[this.index].value='';
48                 }
49                 aInp[this.index].className='current';
50             };
51             
52             aInp[i].onblur=function()
53             {
54                 if(this.id === "pwd") {
55                     if(!this.value) {
56                         pwdLabel.firstChild.nodeValue = "请输入密码：";
57                     }
58                 }
59                 
60                 if(aInp[this.index].value=='')
61                 {
62                     aInp[this.index].value=sArray[this.index];
63                 }
64                 aInp[this.index].className='';
65             };
66         }
67     </script>
68 </body>
69 </html>
posted @ 2012-05-09 11:58  长风freedom  阅读(226)  评论(0)  编辑  收藏  举报