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

問題思考

 

首先解決的是如何在input框裏實現類似於android中hint屬性，html5中添加placeholder，但是現在不是html5，怎麼辦？

 

解決辦法

 

以輸入用戶名爲例：

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

當輸入框獲得焦點的時候，將這個值清空，當丟失焦點的時候，再將之前已經存好的值付給輸入框。

 

下面解決密碼輸入時有短暫的顯示效果：

 

從網上找到了一個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裏。

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