HTML5 - Placeholder

Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性，用来对可输入字段的期望值提供提示信息，目前已经得到主流浏览器的广泛支持，使用方式非常简单：

<input id="username" name="username" placeholder="请输入用户名" type="text">

该属性适用于 <textarea> 多行文本框和 type 属性值为 text, password, search, tel, url 或者 email 等的 <input>。

1.自定义样式

如果想改变 placeholder 的默认呈现样式，应该使用 ::placeholder 伪元素选择器，不过当前还没有浏览器支持，因此只能根据不同浏览器的不同实现方式分别定义：

::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: green;
}

::-moz-placeholder { /* Firefox 19+ */
  color: green;
}

:-ms-input-placeholder { /* IE 10+ 注意这里只有一个冒号 */
  color: green;
}

为什么样式要分别定义呢，如果像下面这样组合到一起：

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

不应该把针对不同浏览器的选择器写在一起，这样写会因为无法识别的选择器而造成这整个规则集被忽略(当然，像类似 IE 7 这种具有超强错误处理能力的浏览器除外，不过这里和 IE 7 没什么关系)。

2.1Firefox 定义方式的改变

如果需要兼容老版本的 Firefox 浏览器，还需要添加下面这种只有一个冒号的样式规则：

:-moz-placeholder { /* Firefox 4 - 18 */
  color: green;
}

因为从 Firefox 19 开始一个冒号的伪类定义方式 :-moz-placeholder 被废弃了，切换为两个冒号的伪元素定义方式。与此同时，它还添加了一个默认的 opacity: 0.54 不透明度样式，如果需要，可以覆盖掉该样式，否则文字是半透明的：

::-moz-placeholder {
  color: green;
  opacity: 1;
}

 

3.伪类和伪元素

伪类和伪元素有什么区别呢？伪类可以理解为给某个元素添加了一个类，比如 :first-child 伪类，选择第一个子元素：

p:first-child {
  font-size: 16px;
}

也可以理解为元素当前的状态，同样也可以通过添加一个真正的 class 来实现类似效果：

p.first-child {
  font-size: 16px;
}

无论是伪类还是真正的类，样式都是直接添加到 <p> 元素上的。

而伪元素可以理解为添加了一个虚拟的元素。比如 p:before 伪元素，可以像下面这个伪代码这样理解：

<before>p:before</before>
<p>paragraph</p>

这里 <p> 元素和 p:before 可以理解为是两个不同的元素。如果被绕晕了，没关系，毕竟这不是本文的重点，更多伪元素与伪类的信息可以参考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN

4.关于伪类选择器引发的问题

因为 IE 浏览器使用的是伪类 :-ms-input-placeholder 选择器来定义 placeholder 的样式，实际上样式是作用于文本输入框的，如果另外还有针对文本输入框的选择器特殊性更高的样式规则，将会覆盖掉该样式，参考下面代码：

input:-ms-input-placeholder { /* 0, 0, 1, 1 */
  color: green;
}

#username { /* 0, 1, 0, 0 */
  color: blue;
}

注释中的数字用来表示该选择器的特殊性。

上面两个样式规则当中使用 ID 选择器的特殊性更高，所以在 IE 10/11 中测试会看到 placeholder 显示为蓝色，与期望的有点不一样。同样使用伪类选择器的旧版本 Firefox 也会出现这个问题，因此，在书写样式的时候需要特别注意，实在搞不定，别忘了还有 !important 规则可以用。其它使用两个冒号的伪元素选择器的浏览器不会出现这个问题，例如：

input::-webkit-input-placeholder { /* 0, 0, 0, 2 */
  color: green;
}

#username { /* 0, 1, 0, 0 */
  color: blue;
}

上面两个样式规则互相之间不会影响，使用 Chrome 测试 placeholder 的颜色为绿色。

关于选择器的特殊性可以参考拙作CSS选择器特殊性与重要性。

5.让行为保持一致

虽然样式是可以自定义了，不过在行为上还有些差异，在 Chrome 和 Firefox 中当文本输入框输入内容时 placeholder 才会消失，清除内容时又会显示出来；而在 IE 中则是当文本输入框获取焦点时 placeholder 就消失了，失去焦点同时没有输入内容时才会重新显示。如果希望在 Chrome 和 Firefox 等浏览器中实现获取焦点就消失的效果，可以借助 :focus 伪类选择器来将 placeholder 的文本颜色设置为透明：

:focus::-webkit-input-placeholder {
  color: transparent;
}

当文本输入框获取焦点时，placeholder 的颜色被设置为透明，感官上就好像消失一样。

6.JavaScript

获取或者修改 placeholder 的内容直接获取或者修改对应文本输入框的 placeholder 属性的值就行了：

$('input').attr('placeholder', 'Please enter your name');

So easy，妈妈再也不用担心我写代码了。不过，想要像普通 DOM 元素那样通过 javaScript 获取伪元素对象直接操作估计很难，目前可以使用

 window.getComputedStyle()

方法来得到其样式属性，该方法的第二个参数是一个伪元素：

 

window.getComputedStyle(document.getElementById('username'),
  '::-moz-placeholder').getPropertyValue('color'); // "rgb(0, 255, 0)"

如果要通过 JavaScript 来修改 placeholder 伪元素的样式的话比较好的一种方式是预先定义好几种不同的样式：

.style-1::-moz-placeholder {
  color: green;
}

.style-2::-moz-placeholder {
  color: red;
}

 

然后通过切换文本输入框的 class 属性来实现修改样式的目的：

$('input').addClass('style-2').removeClass('style-1');

另外也可以通过直接添加样式规则来实现。

7.Polyfill

对于不支持该属性的浏览器，会简单地忽略掉。原则上，placeholder 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。

判断浏览器是否支持 <input> 元素的 placeholder 属性，可以引入 Modernizr 库来判断：