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

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

目錄：

一、實現目的

二、問題思考

三、解決辦法

　　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裡。

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