HTML5 placeholder(空白提示)属性介绍


Posted in HTML / CSS onAugust 07, 2013

原文地址:HTML5′s placeholder Attribute
演示地址: placeholder演示
原文日期: 2010年08月09日
翻译日期: 2013年8月6日
浏览器引入了许多的HTML5 特性: 有些是基于HTML的,有些是JavaScript APIs形式的,但都很有用。其中我最喜欢的一个就是为input元素引入了placeholder属性。
placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏。你肯定见过用JavaScript实现的这种技术成千上万次了,但是来自HTML5的原生支持一般来说会更好一些。
HTML 代码 如下:

复制代码
代码如下:

<input type="text" name="address" placeholder="请输入常住地址...">

你要做的仅仅是添加一个placeholder属性域,以及一些引导性的文字内容,不需要额外的JavaScript脚本来实现这种效果,是不是感觉很棒?
测试 placeholder 的支持度
(注意这是2010年的文章,到现在,2013年,主流浏览器应该都支持了.)
既然 placeholder 是一个新的功能,那么测试浏览器的支持是很有必要的。JS代码如下:
复制代码
代码如下:

// 在JS中创建一个input元素,并判断元素有没有一个叫做placeholder的属性
// 如果浏览器支持的话,那么在js里面引用的DOM就会存在这个属性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

而如果浏览器不支持placeholder特性,那你就需要一个fallback策略来处理,比如MooTools,Dojo,或者其他JavaScript工具。(现在dojo可以用的少了,国内更多的是jQuery和ExtJS。)
复制代码
代码如下:

/* jQuery 代码,当然,记得引入jQuery的库哦*/
$(function(){
if(!hasPlaceholderSupport()){
// 获取address元素
var $address = $("input[name='address']");
placeholder = $address.attr("placeholder");
// 绑定 focus事件
$address.bind('focus',function(){
if(placeholder == $address.val()){
$address.val('');
}
});
// 失去焦点事件
$address.bind('blur',function(){
if('' == $address.val()){
$address.val(placeholder);
}
});
}
});

placeholder 是浏览器另一个伟大的附加属性用于取代js片段,你甚至可以编辑HTML5的placeholder样式.
全部代码如下:
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 placeholder属性演示 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="original=http://davidwalsh.name/html5-placeholder">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// 在JS中创建一个input元素,并判断元素有没有一个叫做placeholder的属性
// 如果浏览器支持的话,那么在js里面引用的DOM就会存在这个属性
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}
/* jQuery 代码,当然,记得引入jQuery的库哦*/
$(function(){
if(!hasPlaceholderSupport()){
// 获取address元素
var $address = $("input[name='address']");
placeholder = $address.attr("placeholder");
// 绑定 focus事件
$address.bind('focus',function(){
if(placeholder == $address.val()){
$address.val('');
}
});
// 失去焦点事件
$address.bind('blur',function(){
if('' == $address.val()){
$address.val(placeholder);
}
});
}
});
</script>
</head>
<body>
<div>
<form method="post" action="">
<input type="text" name="address" placeholder="请输入常住地址...">
<input type="submit" value="测试">
</form>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 #HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 #HTML / CSS
使用HTML5拍照示例代码
Aug 06 #HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 #HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 #HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 #HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 #HTML / CSS
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
解析php中memcache的应用
2013/06/18 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
PyQT实现多窗口切换
2018/04/20 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
应届生法律求职信
2013/10/22 职场文书
白酒市场营销方案
2014/02/25 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
学校师德师风整改方案
2014/10/28 职场文书
检讨书模板
2015/01/29 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL