zoukankan      html  css  js  c++  java
  • 用jquery实现html5的placeholder功能

    版权声明:本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/QianShouYuZhiBo/article/details/28913501

    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值
查看全文
  • 相关阅读:
    Rotation Kinematics
    离职 mark
    PnP 问题方程怎么列?
    DSO windowed optimization 代码 (4)
    Adjoint of SE(3)
    IMU 预积分推导
    DSO windowed optimization 代码 (3)
    DSO windowed optimization 代码 (2)
    OKVIS 代码框架
    DSO windowed optimization 代码 (1)
  • 原文地址:https://www.cnblogs.com/ldxsuanfa/p/10543867.html
  • Copyright © 2011-2022 走看看