大伟的博客

最近看到有一些网站开始启用一个类似Iphone、Google Andriod手机的密码输入体验，大致效果如下图，在用户输入密码的时候可以将用户的输入以明文的方式短时间延迟屏蔽。提高用户输入密码的正确率。有点意思，分享一下：

目前我看到可用的体验地址有：网易通行证登录页面 网易邮箱注册页面，之前看到新浪邮箱也用了，现在找不到了。

实现原理

从上面两个例子的源代码中可以找到，网易登录页面的是使用的一个开源的项目，叫dpassword，而邮箱注册页面是自己写的javascript文件。

Html代码部分

我们知道，原生态的密码输入框是做不到这种效果的，为了实现这种体验，其实是使用了“障眼法”的。在html中，放置了2个input控件，只是一个是用来显示效果的，一个是真正用于保存密码的，如：

<input type="hidden" id="pwd" value="" name="password">
<input type="text" value="" maxlength="16" class="inp ipt-normal" id="password">

将type=”hidden”的那个隐藏input控件来记录用户输入的密码，将type=”text”的这个拿出来做延迟效果。

Javascript部分

javascript需要实现的，无非就是做两件事：

• 将用户在假的密码输入框中的输入记录到input type=”hidden”这个隐藏控件中去。
• 在暴露出来的这个假的input type=”text”中去实现延迟屏蔽的动态效果。

为什么需要2个input控件才能完成这个任务，这也是“障眼法”的关键所在，传统密码输入框输入任何字符，都直接是以“圆点”类似的不可见的方式出现的，根本不可能实现先是明文，然后延迟变为“圆点”类的显示方式，此处输入的“圆点”，其实真的是通过javascript将用户输入的字符替换为一个“圆点”的特殊符号的。

所以在网易邮箱注册的那段javascript文件中，可以看到这样的代码片段：

var replacement = unescape('%u25CF');
//定义一个用于替换的“圆点”的字符，% u25CF
function getpass(passin,passstore)//passin为假的密码输入框的ID;passstore为隐藏控件的ID
{
	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;//将假的输入框中的字符替换为“圆点”
}

我的理解

我不确定这种体验是否是源于Iphone，但目前我知道的应该就是Iphone、Google Andriod手机上是这样的。这种良好的手机输入体验，一定是因为触摸屏的高出错率（相对我们的PC键盘输入）驱动的。所以在网站上应用这种细节，它的价值一定是比应用在触摸屏手机上要小的多的……对于稍微熟悉电脑的用户，盲打输入密码还是没有问题的，这种出错率远比误打开caps lock键出现的次数要小的多。

当然，此举也引起了部分不明真相的网民的恐慌，呵呵。

This entry was posted on 星期五, 六月 25th, 2010 at 1:29 上午 and is filed under Web技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.