HTML5新引入了许多有趣的新特征； 有些出现在HTML中，有些是JavaScript API，都很有用。 其中最喜欢的特征之一是文本框(INPUT )的placeholder属性。 可以使用placeholder属性在文本框中显示提示信息。 如果在文本框中输入任何信息，提示信息将隐藏。 虽然以前可能已经多次看到过这种效果，但其中大部分都是通过JavaScript实现的，但现在HTML5提供了本机支持，效果更好
HTML代码
你也看到了，你只需要在文本框的声明标签中添加placeholder属性。 完全不需要JavaScript来产生这个效果。
检查浏览器是否支持Placeholder属性
因为placeholder是新属性，所以必须检查浏览器是否支持它。 例如，IE6、IE8肯定不支持：
函数hasplaceholdersupport (
var input=document.createelement (' input )；
输入返回(placeholder )；
}
如果用户的浏览器不支持placeholder特性，则必须使用MooTools、Dojo或其他JavaScript工具实现它。
/* mootools调频！ */
varfirstnamebox=$(first_name )、
消息=first name box.get (placeholder )；
firstNameBox.addEvents({ (
focus: function (
if (第一名称盒. value==message ) { searchBox.value=' '； }
(，
blur :功能() }
if(firstnamebox.value==' ' ) { searchBox.value=message； }
}
)；
用CSS美化placeholder
上一篇文章写了用CSS美化鼠标选择的文字的方法。 在进一步研究的过程中，我发现了另一个有趣的CSS功能。 CSS美化输入放置器效果。 用简单的CSS代码美化文本框中的placeholder字符吧。
CSS代码
火狐浏览器的使用方法与谷歌浏览器不太一样。 那些名字很容易理解：
/* all */
:-WebKit-input-placeholder { color : # f00； }
:-moz-placeholder { color : # f00； (/) Firefox19 ) /
3360-ms-input-placeholder { color : # f00； (/) ie ) /
input :-moz-placeholder { color : # f00； }
/* individual: webkit */
# field 2:3360-WebKit-input-placeholder { color : # 00f； }
# field :-WebKit-input-placeholder { color : # 090； 背景：灯光绿色； 文本转换： upper case； }
# field 4:3360-WebKit-input-placeholder { font-style : italic； 文本修饰： overline； letter-spacing:3px； color:#999； }
/* individual: mozilla */
# field 2:3360-moz-placeholder { color : # 00f； }
# field :3360-moz-placeholder { color : # 090； 背景：灯光绿色； 文本转换： upper case； }
# field 4:3360-moz-placeholder { font-style : italic； 文本修饰： overline； letter-spacing:3px； color:#999； }
您可以控制placeholder字符的字体、颜色和样式。 也可以在文本框中以动画形式显示placeholder。 美化你的文本框是一件看起来很小的事情，但对一些交互式网站来说，成功的关键是细节。 虽然目前IE10也只支持placeholder，但是我想使用此本机placeholder效果的人会越来越多。