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

浏览数：29 / 时间：2015年06月09日

目录：

一、实现目的

二、问题思考

三、解决办法

　　1、输入用户名

　　2、输入密码短暂显示

一、实现目的

　　这几天做项目的时候，客户要求在文本框输入密码的时候，要求密码有短暂的显示过程，如下图：

技术分享

二、问题思考

　　首先解决的是如何在input框里实现类似于android中hint属性，html5中添加placeholder，但是现在不是html5，怎么办？

三、解决办法

1.输入用户名

<li>
<input name="textfield" type="text" id="usern"  value="请输入您的用户名"  class="input userName inputholder" />
</li>

　　写一个JS：

$.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()
   })
};

　　当输入框获得焦点的时候，将这个值清空，当丢失焦点的时候，再将之前已经存好的值付给输入框。

2.输入密码短暂显示

　　从网上找到了一个Js库： IPass.packed.js

　　密码的input如下：

 <li>
     <input name="pwdPrompt" type="text" id="textfield2" value="请输入您的密码" class="input passWord inputholder"/>
     <input name="pwd" type="password" id="password" class="input passWord hide"  />
</li>

　　由于我们之前为了显示：”请输入您的密码” 将input的type设为text 所以我们又写了一个input，将其type设为password 并且将这个input隐藏。

在浏览器的开发人员工具中我们可以看到：

技术分享

　　会存在一个id为password—0的input，这个就是我们引入的IPass.packed.js自动生成的。

　　在我的理解看来，先是写一个type为password的input，导入的js会在这个的基础上自动生成一个新的input，这个input是的type为text，可以显示密码。与我们之前写好的type为password的input将结合，实现密码短暂显示过程。

　　然后我们在document.ready里加入：

$(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(); 
        } 
    });
    
});