JQuery实现密码有短暂的显示过程和实现input hint效果

一、实现目的

　　这几天做项目的时候，客户要求在文本框输入密码的时候，要求密码有短暂的显示过程，如下图：
hint效果" name="image_operate_70551421115624701" src="http://images.cnitblog.com/blog/708076/201501/101645443288447.jpg" action-data="http%3A%2F%2Fimages.cnitblog.com%2Fblog%2F708076%2F201501%2F101645443288447.jpg" action-type="show-slide" real_src="http://images.cnitblog.com/blog/708076/201501/101645443288447.jpg" />
hint效果" name="image_operate_81751421115625160" src="http://images.cnitblog.com/blog/708076/201501/101645539685769.jpg" action-data="http%3A%2F%2Fimages.cnitblog.com%2Fblog%2F708076%2F201501%2F101645539685769.jpg" action-type="show-slide" real_src="http://images.cnitblog.com/blog/708076/201501/101645539685769.jpg" />

二、问题思考

　　首先解决的是如何在input框里实现类似于android中hint属性，html5中添加placeholder，但是现在不是html5，怎么办？一开看一下杰瑞教育的小伙伴是怎么处理的！

三、解决办法

1.输入用户名
<</SPAN>li> <</SPAN>input name="textfield" type="text" id="usern" value="请输入您的用户名" class="input userName inputholder" /> </</SPAN>li> [/pre] 　　写一个JS：
hint效果" alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif" /> $.fn.inputholder=function(){ var dval=$(this).val(); $(this).focus(function(){ $(this).val('').addClass('focous'); }).blur(function(){ if($(this).val()==''){ $(this).val(dval).removeClass('focous'); } }); }; var inputholder=$('.inputholder'); if(inputholder.length){ inputholder.each(function() { $(this).inputholder() }) }; [/pre]hint效果" alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif" /> 　　当输入框获得焦点的时候，将这个值清空，当丢失焦点的时候，再将之前已经存好的值付给输入框。
2.输入密码短暂显示
　　从网上找到了一个Js库，下载请到杰瑞教育百度云盘： IPass.packed.js
　　密码的input如下：
<</SPAN>li> <</SPAN>input name="pwdPrompt" type="text" id="textfield2" value="请输入您的密码" class="input passWord inputholder"/> <</SPAN>input name="pwd" type="password" id="password" class="input passWord hide" /> </</SPAN>li> [/pre]　　由于我们之前为了显示：”请输入您的密码” 将input的type设为text  所以我们又写了一个input，将其type设为password 并且将这个input隐藏。
          在浏览器的开发人员工具中我们可以看到：
hint效果" name="image_operate_68621421115627317" src="http://images.cnitblog.com/blog/708076/201501/101649348754747.jpg" action-data="http%3A%2F%2Fimages.cnitblog.com%2Fblog%2F708076%2F201501%2F101649348754747.jpg" action-type="show-slide" real_src="http://images.cnitblog.com/blog/708076/201501/101649348754747.jpg" />
　　会存在一个id为password—0的input，这个就是我们引入的IPass.packed.js自动生成的。
　　杰瑞教育的老师解释的是，先是写一个type为password的input，导入的js会在这个的基础上自动生成一个新的input，这个input是的type为text，可以显示密码。与我们之前写好的type为password的input将结合，实现密码短暂显示过程。
　　然后我们在document.ready里加入：
hint效果" alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif" /> $(document).ready(function(){ // to enable iPass plugin $("input[type=password]").iPass(); $("input[name=pwdPrompt]").focus(function () { $("input[name=pwdPrompt]").hide(); $("input[name=password-0]").show().focus(); }); $("input[name=password-0]").blur(function () { if ($(this).val() == "") { $("input[name=pwdPrompt]").show(); $("input[name=password-0]").hide(); } }); }); [/pre]hint效果" alt="复制代码" src="http://common.cnblogs.com/images/copycode.gif" real_src="http://common.cnblogs.com/images/copycode.gif" />　　注意：这个必须写在document.ready 里，而不是写在js里。
主要还是通过隐藏和显示来控制显示,从而达到密码短暂显示和提示字体隐藏的功能。