HTML5中placeholder属性怎么用

这篇文章给大家分享的是有关HTML5中placeholder属性怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司成都企业网站建设服务，提供网站设计、网站制作网站开发,网站定制,建网站,网站搭建,网站设计,成都响应式网站建设公司,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:028-86922220

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 = $("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样式.

全部代码如下：

复制代码

代码如下:

感谢各位的阅读！关于“HTML5中placeholder属性怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！