用jquery实现html5的placeholder功能
生活随笔
收集整理的這篇文章主要介紹了
用jquery实现html5的placeholder功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
版權聲明：本文為博主原創文章。未經博主同意不得轉載。 https://blog.csdn.net/QianShouYuZhiBo/article/details/28913501
說明：this.defaultValue指的是該標簽原始的value值
html5的placeholder功能在表單中經經常使用到。它主要用來提示用戶輸入信息，當用戶點擊該輸入框之后，提示文字會自己主動消失。
我們用jquery實現相似的功能：
當輸入框獲得焦點時，清空輸入框中的提示文字。
當輸入框失去焦點時。若輸入框中的數據為空，則再次出現提示文體。
效果圖：
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>說明：this.defaultValue指的是該標簽原始的value值
轉載于:https://www.cnblogs.com/ldxsuanfa/p/10543867.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的用jquery实现html5的placeholder功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 跨行转账手续费免了吗？2018银行跨行转
- 下一篇： Deployment descripto