用jquery实现html5的placeholder功能
生活随笔
收集整理的這篇文章主要介紹了
用jquery实现html5的placeholder功能
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
版權(quán)聲明：本文為博主原創(chuàng)文章。未經(jīng)博主同意不得轉(zhuǎn)載。 https://blog.csdn.net/QianShouYuZhiBo/article/details/28913501
說(shuō)明：this.defaultValue指的是該標(biāo)簽原始的value值
html5的placeholder功能在表單中經(jīng)經(jīng)常使用到。它主要用來(lái)提示用戶輸入信息，當(dāng)用戶點(diǎn)擊該輸入框之后，提示文字會(huì)自己主動(dòng)消失。
我們用jquery實(shí)現(xiàn)相似的功能：
當(dāng)輸入框獲得焦點(diǎn)時(shí)，清空輸入框中的提示文字。
當(dāng)輸入框失去焦點(diǎn)時(shí)。若輸入框中的數(shù)據(jù)為空，則再次出現(xiàn)提示文體。
效果圖：
talk is cheap , show you code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"></script> <style type="text/css">input{margin-top:50px;margin-left:100px; color: gray;} </style> </head><body> <div><input type="text" id="username" value="用戶名"></div> <div><input type="text" id="email" value="郵箱"></div> </body> <script type="text/javascript">$("input").click(function(){$(this).val("");});$("input").blur(function(){if($(this).val() == ""){$(this).val(this.defaultValue);} }) </script> </html>說(shuō)明：this.defaultValue指的是該標(biāo)簽原始的value值
轉(zhuǎn)載于:https://www.cnblogs.com/ldxsuanfa/p/10543867.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的用jquery实现html5的placeholder功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 跨行转账手续费免了吗？2018银行跨行转
- 下一篇： 从两方面分析，农行燃梦信用卡怎么样？