用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