HTML/CSSHTML5 placeholder属性

0

HTML5 placeholder属性

阅读:1568 时间:2017年01月07日

今天在浏览某个网站时,感觉UI很漂亮,随手就想看看网站的CODE怎么样,打开了开发者工具后,无意间发现了一个陌生的input属性:placeholder,查了一下资料,原来是HTML5新增的内容。...

今天在浏览某个网站时,感觉UI很漂亮,随手就想看看网站的CODE怎么样,打开了开发者工具后,无意间发现了一个陌生的<input>属性:placeholder,查了一下资料,原来是HTML5新增的内容。

代码如下:

<input type="text" placeholder="请输入关键字" />

 

小小的说明一下用法:

placeholder 属性用于提供<input>标签输入内容时的提示信息,该提示会在未输入内容时显示,当<input>标签获得焦点时,这个提示信息会消失。

注:placeholder 属性可以应用于以下几种<input>类型(type):text, search, url, telephone, email,password,textarea 。另外此属性IE不支持。

在HTML4.01及以前,我们是用JS来实现的。

<input value="请输入关键字" onfocus="javascript:if(this.value=' 请输入关键字 '){this.value='';}" onblur="javascript:if(!this.value){this.value=' 请输入关键字 ;}" />

然而现在有了HTML5的这个新属性,实现起来要方便很多了。

关于placeholder样式控制下篇文章继续做探究。


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^