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

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

复制代码
代码如下:



你要做的仅仅是添加一个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 = $("inputname=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样式.
全部代码如下:

复制代码
代码如下:




HTML5 placeholder属性演示















上一篇:HTML5 自动聚焦(autofocus)属性使用..

下一篇:HTML5中div、article、section的区别..

专业的织梦模板定制下载站,在线购买后即可下载!

商业源码

跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

立刻开启你的建站之旅

QQ在线客服

服务热线

织梦建站咨询