用jquery实现html5的placeholder功能
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功能的更多相关文章
- 记录：asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...
- jquery水印插件：placeholder
jquery水印插件:placeholder 有的浏览器支持html5的水印placeholder(如Crome,firefox,ie10+),有的不支持html5的placeholder(ie9,i ...
- 利用Jquery使用HTML5的FormData属性实现对文件的上传
1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- jquery一句话实现快速搜索功能
jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- 用css修改HTML5 input placeholder颜色
使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和 ...
- html5的placeholder属性（IE如何兼容placeholder属性）
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
随机推荐
- Django 之 用redis存储session
方案I: 1. 安装 django-redis liuqian@ubuntu:~$ pip install django-redis dango-redis 官方文档:http://niwinz.gi ...
- (转）Fiddler教程（Web调试工具）
转载地址:写得很不错的fildder教程 http://kb.cnblogs.com/page/130367/ Fiddler的基本介绍 Fiddler的官方网站: www.fiddler2.c ...
- 送人玫瑰，手留余香——2015年技术分享交流小结
飞测说:分享让我们更加团结,交流让我们更加凝聚,送人玫瑰,手留余香,更多分享交流也让自己成长的更加完善,2015年已经过去了好几个月,今天刚好整理了下我们科大讯飞武汉测试团队技术分享交流的这块,顺便做 ...
- 20145237 Exp2 后门原理与实践
20145237<网络对抗>Exp2 后门原理与实践 Windows获得Linux Shell 在Windows下,先使用ipconfig指令查看本机IP: 输入ncat.exe -l - ...
- StreamSets 部署 Pipelines 到 SDC Edge
可以使用如下方法: 下载edge 运行包并包含pipeline定义文件. 直接发布到edge 设备. 在data colelctor 机器配置并配置了edge server 地址(主要需要网络可访问) ...
- consul 1.2 支持service mesh
主要说明: This release supports a major new feature called Connect that automatically turns any existing ...
- ETA6093 或 ETA9741 ETA9742 的 TYPE-C 的资料收集
ETA6093 或 ETA9741 ETA9742 的 TYPE-C 的资料收集 因为项目使用. 这个 IC 好玩,但是还是有一些需要注意的. 对我有用的信息. http://www.great-et ...
- HyperLogLog(不精确的去重计数方案)
pfadd 用法和sadd一样 pfcount 用法和scard一样 127.0.0.1:6379> get lan (nil) 127.0.0.1:6379> pfadd lan js ...
- Bootstrap-Plugin：下拉菜单（Dropdown）插件
ylbtech-Bootstrap-Plugin:下拉菜单(Dropdown)插件 1.返回顶部 1. Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了 ...
- [C#]读文件
代码段来自 支付宝接口代码示例 /// <summary> /// 从文件读取公钥转公钥字符串 /// </summary> /// <param name=" ...