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. git 解决冲突问题

    问题描述: 一般来说,只要多人提交同一仓库,必然会有冲突的发生. Git解决 利用git解决冲突很简单,最常规的方法莫过于工作之前先更新整个project,完成之后及时提交.然而尽管这样做,也难免有人 ...

  2. 【整理】简单的数学期望和概率DP

    数学期望 P=Σ每一种状态*对应的概率. 因为不可能枚举完所有的状态,有时也不可能枚举完,比如抛硬币,有可能一直是正面,etc.在没有接触数学期望时看到数学期望的题可能会觉得很阔怕(因为我高中就是这么 ...

  3. python3的eval和exec的区别与联系

    eval: 可以把字符串里的字符转换为可执行代码,但只支持一行字符.可以返回执行后得到的值.如下: f = "3+6+9+8"s = eval(f)print(s)输出: &quo ...

  4. PLSQL在64位 win7/WIN8上运行（绿色版plsql、无需安装oracle客户端）

    一.准备需要的文件: 1.plsql文件绿色压缩包 2.oracle客户端文件绿色压缩包 二.设置PLSQL 运行plsql,不登陆进入plsql点“工具”-“首选项” 按照如图设置“ oracle主 ...

  5. VB中Excel 2010的导入导出操作

    VB中Excel 2010的导入导出操作 编写人:左丘文 2015-4-11 近来这已是第二篇在讨论VB的相关问题,今天在这里,我想与大家一起分享一下在VB中如何从Excel中导入数据和导出数据到Ex ...

  6. mac电脑 pip安装包后 撞到了系统python里面的解决方法

    /usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-pack ...

  7. 【ZZ】浅谈大型web系统架构 | 菜鸟教程

    浅谈大型web系统架构 http://www.runoob.com/w3cnote/large-scale-web-system-architecture.html

  8. thinkPHP volist标签循环输出多维数组

    <volist name="company" id="vo">{$vo.company_name}<volist name="vo[ ...

  9. javascript使用bind指定接收者

    var json = { jArray: [], jPush: function (c) { this.jArray.push(c); } } var examp = ["123" ...

  10. 国外接活网站Elance, Freelancer和ScriptLance的介绍和对比

    国外接活网站Elance, Freelancer和ScriptLance的介绍和对比littleben 一年以前 (via WEB)http://www.geekpark.net/entity/vie ...