昼围观，夜扯淡
上一篇： 下一篇：
2010-03-20 类别
技术
话题

用JavaScript把字符显示为圆点


今天用Ubuntu 9.10 + Firefox 3.5.8注册网易邮箱，遇到这样的问题：输入密码显示为明文，提交时又出现下图所示的错误。

网易邮箱注册新用户页面，提交后出现问题

页面的加载状态是“完成”，但JavaScript脚本似乎执行失败。后来反复试了几次，有时出现这种情况，有时又没问题。现在还没弄清原因，倒是知道了如何用JS脚本把字符显示为圆点。

看该页面的html源码和JS脚本，发现它没有采用常见的做法、把密码输入框（input元素）的类型设为password，而是设为text类型，然后再用JS脚本把输入的字符显示成圆点。这样一来，当用户输入一个字符、抬起按键之前，密码框里显示的是该字符本身；松开按键后，才显示为圆点。这么做难道是为了方便用户检查输入？

效果参见： reg.htm （使用脚本：function.js，jquery-1.3.1.min.js）

具体实现（截取于网易邮箱用户注册页面的源码）：
1. reg.htm

1
2
3
4
5
6
7

<HTML>
<SCRIPT type=text/javascript src="jquery-1.3.1.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="function.js"></SCRIPT>
Password:
<INPUT id=pwd type=hidden name=password>
<INPUT id=password type=text class="inp ipt-normal" maxLength=16>
</HTML>

2. function.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

var replacement = unescape('%u25CF'); //25CF是圆点符号的unicode编码
 
function getpass(passin,passstore)
{
    var passwd=document.getElementById(passstore);
    var strin=passin.value;
    var strcache=passwd.value;
    var password="";
    var strout="";
 
    for(i=0;i<strin.length;i++)
    {
        switch(strin.charAt(i))
        {
	    case replacement:
		password+=strcache.charAt(i)==""?strin.charAt(i):strcache.charAt(i);
		break;
	    default:
		password+=strin.charAt(i);
		break;			
	}
	strout+=replacement;
    }
    passwd.value=password;
    passin.value=strout;
}
 
$(document).ready(function(){
	$("#password").bind("keyup", function(){
		getpass(this,'pwd');
		return false;
	});
});
本文链接：http://henzhai.com/tech/2010/03/javascript-convert-character-to-asterisk.html
上一篇： 下一篇：
55vpn.com - 享受畅通无阻的Internet!

相关阅读 »


6条评论 ▼

  1. 小骆驼商队 says:
    2011-09-29 at 19:24

    难道是跟 iPhone 学的？感觉在电脑上这么搞有点吃饱了撑的呀 =.=

    回复

发表评论 »