JQuery插件开发之如何实时显示被隐藏的输入框密码
wengkevin 2015-08-21
我们前面曾经介绍过如何提高用户界面表单性能，同时我们也介绍过如何避免使用密码框来避免隐藏输入的密码，也讨论过隐藏密码显示对于用户体验将有多么糟糕。
基本上对于密码输入处理我们有如下俩个可选方式：
- 继续使用密码框控件，不考虑用户的操作体验
- 使用一般的输入框，不考虑用户密码的安全性
这就是为什么我们这里需要开发一个鼠标悬浮可显示密码的控件作为第三选择的原因，既可以提高安全，同时也可以大大满足用户体验
今天将讲解如何使用jQuery插件来完成上述功能，同时让大家了解更多jQuery插件开发，动态内容显示，及其代码开发的最佳实践。
这里我们将仿效一些移动设备的界面设计方式，我们将能看到最后一个输入的字符。废话不说，我们现在开始！
用户体验背景
在我们正式开发代码前，我们最好先了解为什么我们开发这些功能。这个功能完全是为了用户体验而设计的，并且是为了让用户体验能达到极致。
最初开始讨论屏蔽用户密码问题的人是Jakob Nielsen，在初在他的"停止使用密码屏蔽"文章中，他表达了对于密码屏蔽的观点。 有时候我们可能在一些可疑的人周围，他们正寻找一切可能的机会来获取我们的密码。但是有时候，我们则不需要应付这样糟糕的情况。
理想情况下我们需要能够同时应付最好的和最坏的场景。不管使用IE6还是chrome14.0.803.2Beta等浏览器。我们都希望能做的最好。
以上就是为什么我们不想让密码缺省就被设置为屏蔽的主要原因。实际上我们应该提供给我们用户一个更好的选择。
代码开发
我们需要做的是得到一个一般的密码控件，然后把它转化成文字，再在其上创建一个覆盖层，这个在你输入过程中会自动覆盖。使用这个方法你可以屏蔽任何内容而不用影响本身的输入内容。以下图片很好的解释了这一切：
现在我们开始正式编写代码。
我们首先开始一个基本的表单标签。很简单只有2个控件，一个有缺省的数值，另外一个是空白的，用来显示你需要的东西。
- <divid="container">
- <h1>Sign Up!</h1>
- <formaction="#"method="get">
- <label>
- <spanclass="title">Old Password</span>
- <spanclass="desc">This is our awesome password field with default value. Try it out!</span>
- <inputtype="text"name="oldpassword"id="oldpassword"value="tHis1$myP4swrd."/>
- </label>
- <label>
- <spanclass="title">Password</span>
- <spanclass="desc">This is our awesome blank password field. Try it out!</span>
- <inputtype="password"name="password"id="password"/>
- </label>
- </form></div>
然后我们调用jQuery和插件文件，如下：
- <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
- // call jQuery from google!
- </script>
- <scripttype="text/javascript"src="jquery.hp.js">
- // call plugin </script>
以下我们创建我们基本的插件文件。你可以参考我们的jQuery Smooth Table of Contents Plugin，这里我们使用一个非常简单的结构：
- (function($){
- $.fn.hoverpass =function(options){
- //Our default options
- var defaults ={
- bullet:"•",
- //which should be the "masking" character
- font:"'Lucida Console', monospace",
- //please just use MONOSPACE fonts
- bg:"#fff",
- // background style for bullets
- free:"",
- // add your own additional styling here
- freeBul:"float: left; overflow: hidden;",
- // add your own additional styling for bullets here
- delay:500,//how long it takes to create the bullet over the last character, in milliseconds
- delayHover:3000,//how long it takes to hide again a hovered character
- animation:500,//how long it takes the animation itself
- maxSize:10// maximum number of characters, to prevent bullets exploding input's size
- };
- //let's extend our plugin with default or user options when defined
- var options = $.extend(defaults, options);
- returnthis.each(function(){
- //our action goes here
- });
- };
- })
- (jQuery);
以上我们定义了缺省的参数，接下来我解释一下：
- bullet - 是我们用来屏蔽密码的符号。你可以使用任何符号或者HTML的符号定义来屏蔽密码
- font - 这个非常重要，这个插件实现只能实现在monspaced字体上。因为其它类型字体，每一个字符都有它自己的长度，我们无法屏蔽。
- bg - 如果你使用其他的输入框背景，那么你需要针对的在屏蔽层上也实现。因为屏蔽层会居于输入框之上。
- free - 这里你添加margin用来处理你输入的padding问题。而且你可以用户来设置输入字体大小
- maxsize - 这个对于密码框非常短的时候也非常重要。如果你不修改的话，你会得到多余的bullets而把输入内容挤开。
到这里你会有个基本插件，通过调用$(elem).hoverpass()，由第二行$.fn.hoverpass = function(){}定义。
修改输入类型到文本
我不确认你是否以前尝试过，但是这里我得告诉大家，你是不可以修改inputs的类型。这里可能是因为安全原因。看起来只有IE对此有担忧。不管怎样，我们要作的就是创建一个没有type属性的输入框克隆。这里有几个方法，我这里使用这个：
完整代码及内容见原文：http://www.gbtags.com/gb/share/5827.htm
