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 相关文章推荐
利用CSS3的定位页面元素
Aug 29 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 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的博客ping服务代码
2012/02/04 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP实现的购物车类实例
2015/06/17 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
怎样写演讲稿
2014/01/04 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
爱牙日活动总结
2014/08/29 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
公司老总年会致辞
2015/07/30 职场文书
对讲机知识
2022/04/07 无线电