文档章节

用jquery实现html5的placeholder功能

z
 zhezh
发布于 2014/06/06 20:05
字数 293
阅读 11
收藏 0

tml5的placeholder功能在表单中经常用到,它主要用来提示用户输入信息,当用户点击该输入框之后,提示文字会自动消失。

我们用jquery实现类似的功能:

当输入框获得焦点时,清空输入框中的提示文字。

当输入框失去焦点时,若输入框中的数据为空,则再次出现提示文体。

<!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>


© 著作权归作者所有

共有 人打赏支持
z
粉丝 0
博文 16
码字总数 293
作品 0
济南
私信 提问
30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河
2011/07/29
15.9K
7
10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单...

android哥哥
2012/08/06
8.9K
10
分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15 来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。尤...

gbin1
2011/12/21
3.5K
0
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.7K
8
解决ie不支持HTML5 placeholder的问题

https://github.com/mathiasbynens/jquery-placeholder 解决ie不支持HTML5 placeholder的问题 Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+......

有个地方叫作遥远
2014/09/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
51分钟前
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0
Java并发编程:深入剖析ThreadLocal

ThreadLocal 的理解 ThreadLocal,很多地方叫线程本地变量,或线程本地存储。ThreadLocal为变量在每个线程中都创建了一个副本,每个线程可以访问自己内部的副本变量。===》解决的问题是线程间...

细节探索者
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部