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值

用jquery实现html5的placeholder功能的更多相关文章

  1. 记录：asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6

    @{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...

  2. jquery水印插件：placeholder

    jquery水印插件:placeholder 有的浏览器支持html5的水印placeholder(如Crome,firefox,ie10+),有的不支持html5的placeholder(ie9,i ...

  3. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  5. jquery一句话实现快速搜索功能

    jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...

  6. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  7. 用css修改HTML5 input placeholder颜色

    使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和 ...

  8. html5的placeholder属性（IE如何兼容placeholder属性）

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  9. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

随机推荐

  1. IOS layoutSubviews总结

    ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size - (void)sizeToFit - (void)layoutSubviews - (voi ...

  2. Python ImportError: No module named Image

    /********************************************************************************* * Python ImportEr ...

  3. 使用TortoiseGit+码云管理项目代码

    1.下载安装msysgit. 2.下载安装tortoisegit. 3.创建ssh密钥. 开始–所有程序–TortoiseGit–PuTTYgen 生成方法:点击“Generate”后,鼠标在key下 ...

  4. test20181024 zi

    题意 分析 这种题一般是推公式,发现必须求得的量,然后定义函数记忆化. 然后那些函数里面又是递归处理,合并. 代码 为了不爆空间,用map存记忆化内容. #include<bits/stdc++ ...

  5. 使用dev_add_pack注冊新的以太网类型

    接着上一篇文件:使用PF_PACKET和SOCK_RAW发送自己定义type以太网数据包 上一篇文章我们使用wireshare抓包.尽管在Linux下也能够使用抓包工具,可是我打算自己动手,在内核添加 ...

  6. Form中的keypress事件不能用

    Form中的keypress事件不能用 编写人:CC阿爸 2015-4-8 近期在修改系统时,想给一画面增加一个组合键功能,但在form_keypress事件中加入代码,但无论如何也不能触发该动作. ...

  7. 黄聪：“不允许对64位应用程序进行修改”的解决方法 --“Changes to 64-bit applications are not allowed.”

    在64位系统中使用VS对程序(32位的)进行调试,出现“不允许对64位应用程序进行修改”的提示,如下图所示: 解决方法:在VS主菜单上选择“生成” or "Build"——“配置管 ...

  8. DbUtils: JDBC Utility Component Examples

    DbUtils: JDBC Utility Component Examples \JDBCCollector\jdbc\src\main\java\com\ai\toptea\collection\ ...

  9. PHP扩展类ZipArchive实现压缩解压Zip文件和文件打包下载 && Linux下的ZipArchive配置开启压缩 &&搞个鸡巴毛，写少了个‘/’号，浪费了一天

    PHP ZipArchive 是PHP自带的扩展类,可以轻松实现ZIP文件的压缩和解压,使用前首先要确保PHP ZIP 扩展已经开启,具体开启方法就不说了,不同的平台开启PHP扩增的方法网上都有,如有 ...

  10. js将UTC时间转化为当地时区时间（UTC转GMT）

    我们在进行网站开发的时候有可能会涉及到国外的用户或者用户身在国外,这时就会存在时差问题,比如说我们在中国的时间是08:00,但是此时韩国的时间是09:00,如果在网页上需要进行相关显示的话就会出现问题 ...