JQuery實現密碼有短暫的顯示過程和實現 input hint效果

目錄：

一、實現目的

二、問題思考

三、解決辦法

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

　　注意：這個必須寫在document.ready 里，而不是寫在js里。

　　主要還是通過隱藏和顯示來控制顯示,從而達到密碼短暫顯示和提示字體隱藏的功能。

 

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。