您好,登錄后才能下訂單哦!
這篇文章主要介紹jQuery中如何制作input提示內(nèi)容,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
我們都知道HTML5的input新屬性有 placeholder="",那么這個(gè)不兼容IE低版本我們只能用腳本來(lái)寫了。
首先HTML新建一個(gè)input
<input type="text" class="input" value="請(qǐng)輸入搜索內(nèi)容" />
然后我們?cè)僖胂鄳?yīng)的js庫(kù),再使用jQuery
<script src="js/jquery-1.8.3.min.js"></script> <script> $(".input").bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultValue; } } }); </script>
簡(jiǎn)單吧,這樣就可以了,那么這個(gè)是input的屬性是text,我們要密碼password也一樣可以顯示IE低版本,我們用的方法就是用兩個(gè)input,一個(gè)text默認(rèn)顯示,一個(gè)password默認(rèn)隱藏,當(dāng)text獲取焦點(diǎn)時(shí)password顯示,text隱藏,沒(méi)有輸入內(nèi)容失去焦點(diǎn)text顯示,password顯示,好了,廢話不多說(shuō),看代碼!
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>密碼框提示</title> </head> <body> <input type="text" value="登錄密碼" class="show" > <input type="password" class="log_paw" > <script src="js/jquery-1.8.3.min.js"></script> <script> $('.show').focus(function(){ var text_value = $(this).val(); if (text_value == this.defaultValue) { $(this).hide(); $(this).next('input.log_paw').show().focus(); } }); $('input.log_paw').blur(function() { var text_value = $(this).val(); if (text_value == '') { $(this).prev('.show').show(); $(this).hide(); } }); </script> </body> </html>
以上是“jQuery中如何制作input提示內(nèi)容”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。