html placeholder属性,css中placeholder用法

　　占位符属性允许您在文本框中显示提示信息。一旦您在文本框中输入任何信息，提示信息将被隐藏。这种效果你可能之前见过无数次了，但是大部分都是用JavaScript实现的。现在HTML5提供原生支持，效果更好！

　　HTML代码将代码复制如下：input type= text name= first _ name placeholder= your name . /

　　正如您所看到的，您需要做的就是将占位符属性添加到文本框的声明标签中。创造这种效果根本不需要JavaScript。

　　检查浏览器是否支持Placeholder属性

　　因为占位符是一个新的属性，所以需要检查你的浏览器是否支持它。例如，IE6和IE8肯定是不支持的：复制代码如下：

　　函数hasPlaceholderSupport() {

　　var input=document . createelement( input )；

　　return(输入中的“占位符”)；

　　}

　　如果用户的浏览器不支持占位符功能，那么需要使用MooTools、Dojo或者其他JavaScript工具来实现：复制如下代码：

　　/* mootools ftw！*/

　　var firstNameBox=$(first_name )，

　　message=first name box . get( placeholder )；

　　firstNameBox.addEvents({

　　焦点：函数(){

　　if(first name box . value==message){ search box . value=“”；}

　　},

　　模糊：函数(){

　　if(first name box . value== ){ search box . value=message；}

　　}

　　});

　　用CSS美化placeholder

　　在进一步的研究中，我发现了另一个有趣的CSS功能：CSS美化了输入占位符效果。让我用简单的CSS代码美化文本框中的占位符文本。

　　CSS代码

　　在Firefox中的用法和在Google Chrome中的用法不同。它们的名字很好理解：复制代码如下：

　　/*全部*/

　　:-WebKit-input-placeholder { color:# f00；}

　　:-moz-placeholder { color:# f00；} /*火狐19 */

　　:-ms-input-placeholder { color:# f00；} /* ie */

　　input:-moz-placeholder { color:# f00；}

　　/*个人：webkit */

　　# field 2:-WebKit-input-placeholder { color:# 00f；}

　　# field 3:-WebKit-input-placeholder { color:# 090；背景：浅绿色；文本转换：大写；}

　　# field 4:-WebKit-input-placeholder { font-style:italic；文本-装饰：上划线；字母间距：3px颜色：# 999；}

　　/*个人：mozilla */

　　# field 2:-moz-placeholder { color:# 00f；}

　　# field 3:-moz-placeholder { color:# 090；背景：浅绿色；文本转换：大写；}

　　# field 4:-moz-placeholder { font-style:italic；文本-装饰：上划线；字母间距：3px颜色：# 999；}

　　您可以控制占位符文本的字体、颜色和样式。您甚至可以动画显示文本框的占位符。美化你的文本框是一件看起来很小的事情，但是对于一些互动网站来说，成功的关键在于细节。现在IE10只支持占位符。相信会有越来越多的人使用这种原生占位符效果。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。