HTML5 的placeholder属性（兼容各版本）

最新推荐文章于 2021-09-30 15:36:41 发布

原创最新推荐文章于 2021-09-30 15:36:41 发布 · 置顶 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #placeholder

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML5中Placeholder属性的功能与用法，包括如何设置文本框的提示信息，并提供了一种兼容IE10以下版本的方法来改变占位文本的颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。

placeholder 点击可下载（写好的案例）

其它情况：

当在IE10以下版本中占位文本的颜色是黑色；IE10以上版本（其它浏览器最新版本）为灰色，为了兼容IE10以下版本（老版本）统一让占位符更改为灰色，建议可以利用以下方法更改占位文本颜色值。

基本代码：
<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;"/>

完善代码：
<input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>