属性占位符_研究：HTML5占位符属性

HTML5中我最喜欢的新功能之一是能够轻松添加占位符文本 。 占位符文本是您在输入字段中找到的灰色文本，用于向用户提示在该字段中需要什么输入。 用户开始在input字段中input ，该文本将消失。

在过去，我们通常使用JavaScript进行操作 ，如下所示；

<input type="text" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">

这种做法没有错，但是在HTML5上更容易。

HTML5引入了带有逻辑名称的新属性； placeholder 。 这是一个例子：

<input type="text" placeholder="Placeholder Text">

如果我们在浏览器上查看它，则输入现在应该具有灰色文本，如下所示；

需要注意的几件事：根据规范，不应该将placeholder属性用作label的替代，并且还建议将此属性仅应用于需要文本的input类型，例如text ， password ， search ， email ， textarea和tel 。

将placeholder添加到input类型： radio和checkbox将没有任何区别。

占位符和CSS

此外，也可以通过CSS对占位符文本进行样式设置，但是在撰写本文时，它仍然仅限于Firefox和Webkit浏览器。

以下示例显示了如何在Webkit和Firefox中将占位符文本更改为绿色；

input::-webkit-input-placeholder {
	color: green;
}
input:-moz-placeholder {
	color: green;
}

但要记住， ::-webkit-input-placeholder和:-moz-placeholder仅会影响文本，不能并行编写。

input::-webkit-input-placeholder, input:-moz-placeholder {
	color: green;
}

这段代码不起作用。

属性选择器

CSS3还通过引入[placeholder]属性选择器来支持此属性。

input[placeholder] {
	border: 1px solid green;
}

在上面的示例中，我们选择具有placeholder属性的每个input ，并将边框更改为绿色。

浏览器兼容性

毫不奇怪，旧的浏览器不支持此新HTML5功能，目前仅在以下版本中完全支持： Firefox 4 +，Chrome 4 +，Safari 5 +，Opera 11.6和Internet Explorer 10 （尚未正式发布）。

占位符Polyfills

不过，如果我们需要在较旧的浏览器中显示占位符，但仍然能够使用placeholder属性，则可以使用Polyfills。 那里有很多Placeholder Polyfills ，但在本示例中，我们将使用PlaceMe.js ；

<script src="jquery.js" type="text/javascript"></script>
<script src="placeme.js" type="text/javascript"></script>

从上面的代码片段中可以看到， PlaceMe.js依赖于jQuery。 现在，如果我们在例如Internet Explorer 9中查看它，则所有输入现在都应显示占位符文本。

• 观看演示
• 下载源

最终思想

HTML5占位符属性无疑使添加占位符文本更加容易。 现在，我们（Web开发人员和设计师）可以选择使用哪种方法：JavaScript或HTML5。

如果您认为使用Polyfills和jQuery支持旧的浏览器是多余的，那么JavaScript显然更适合这项工作。 但是，如果您可以和平地忽略旧的浏览器，那么使用HTML5占位符可能是一个更好的方法。

翻译自: https://www.hongkiat.com/blog/html5-placeholder/