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滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
python使用arp欺骗伪造网关的方法
2015/04/24 Python
如何在python中实现随机选择
2019/11/02 Python
浅析python 字典嵌套
2020/09/29 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
客服主管岗位职责
2013/12/13 职场文书
七年级生物教学反思
2014/01/30 职场文书
2014年党支部学习材料
2014/05/19 职场文书
工作证明格式及范本
2014/09/12 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
旷课检讨书500字
2014/10/14 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang