JQuery插件开发之如何实时显示被隐藏的输入框密码

我们前面曾经介绍过如何提高用户界面表单性能，同时我们也介绍过如何避免使用密码框来避免隐藏输入的密码，也讨论过隐藏密码显示对于用户体验将有多么糟糕。

基本上对于密码输入处理我们有如下俩个可选方式：

1. 继续使用密码框控件，不考虑用户的操作体验
2. 使用一般的输入框，不考虑用户密码的安全性

这就是为什么我们这里需要开发一个鼠标悬浮可显示密码的控件作为第三选择的原因，既可以提高安全，同时也可以大大满足用户体验

今天将讲解如何使用jQuery插件来完成上述功能，同时让大家了解更多jQuery插件开发，动态内容显示，及其代码开发的最佳实践。

这里我们将仿效一些移动设备的界面设计方式，我们将能看到最后一个输入的字符。废话不说，我们现在开始！

用户体验背景

在我们正式开发代码前，我们最好先了解为什么我们开发这些功能。这个功能完全是为了用户体验而设计的，并且是为了让用户体验能达到极致。

最初开始讨论屏蔽用户密码问题的人是Jakob Nielsen，在初在他的"停止使用密码屏蔽"文章中，他表达了对于密码屏蔽的观点。 有时候我们可能在一些可疑的人周围，他们正寻找一切可能的机会来获取我们的密码。但是有时候，我们则不需要应付这样糟糕的情况。

理想情况下我们需要能够同时应付最好的和最坏的场景。不管使用IE6还是chrome14.0.803.2Beta等浏览器。我们都希望能做的最好。

以上就是为什么我们不想让密码缺省就被设置为屏蔽的主要原因。实际上我们应该提供给我们用户一个更好的选择。

代码开发

我们需要做的是得到一个一般的密码控件，然后把它转化成文字，再在其上创建一个覆盖层，这个在你输入过程中会自动覆盖。使用这个方法你可以屏蔽任何内容而不用影响本身的输入内容。以下图片很好的解释了这一切：

现在我们开始正式编写代码。

我们首先开始一个基本的表单标签。很简单只有2个控件，一个有缺省的数值，另外一个是空白的，用来显示你需要的东西。

1. <divid="container">  

1. <h1>Sign Up!</h1> 

1. <formaction="#"method="get">

 

1. <label> 

 

1. <spanclass="title">Old Password</span> 

 

1. <spanclass=