JQuery實現(xiàn)密碼有短暫的顯示過程和實現(xiàn)input hint效果

qdjianghao

一、實現(xiàn)目的

　　這幾天做項目的時候，客戶要求在文本框輸入密碼的時候，要求密碼有短暫的顯示過程，如下圖：

二、問題思考

　　首先解決的是如何在input框里實現(xiàn)類似于android中hint屬性，html5中添加placeholder，但是現(xiàn)在不是html5，怎么辦？一開看一下杰瑞教育的小伙伴是怎么處理的！

三、解決辦法

1.輸入用戶名 <</SPAN>li> <</SPAN>input name="textfield" type="text" id="usern" value="請輸入您的用戶名" class="input userName inputholder" /> </</SPAN>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() }) };

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

2.輸入密碼短暫顯示

　　從網(wǎng)上找到了一個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>

　　由于我們之前為了顯示：”請輸入您的密碼” 將input的type設(shè)為text  所以我們又寫了一個input，將其type設(shè)為password 并且將這個input隱藏。

          在瀏覽器的開發(fā)人員工具中我們可以看到：

　　會存在一個id為password—0的input，這個就是我們引入的IPass.packed.js自動生成的。

　　杰瑞教育的老師解釋的是，先是寫一個type為password的input，導(dǎo)入的js會在這個的基礎(chǔ)上自動生成一個新的input，這個input是的type為text，可以顯示密碼。與我們之前寫好的type為password的input將結(jié)合，實現(xiàn)密碼短暫顯示過程。

　　然后我們在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里。

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

杰瑞教育原創(chuàng)博文，轉(zhuǎn)載請注明出處。查看原文請到：杰瑞教育博客園