saber酱的抱枕

Fly me to the moon

08/24
08:00
学习

HTML5中input标签的placeholder属性

网页上的输入框里经常会预设浅色的文字用来提示用户应该输入什么内容。当用户开始填写内容时,预设的文字就消失,文字颜色也变成正常的颜色。如果用户清除了填写的内容,则恢复成预设的样式。

这个效果以前经常用JavaScript来做,现在HTML5中对一些input标签添加了placeholder属性,实现了类似的效果。

我们可以通过placeholder属性的值来规定预设值。预设文字是浅色的,在用户开始输入时也会隐藏。

我们可以通过以下选择器来设置所有placeholder文字的样式:

::-webkit-input-placeholder{color:#0c0;}
::-moz-placeholder{color:#0c0;}
:-ms-input-placeholder{color:#0c0;}

IE10才开始支持placeholder属性。而且它的选择器前面只有一个冒号(这个我没测试过)。

这是个很美好的属性,不过兼容性还有点坑。来个示例:

HTML5中input标签的placeholder属性