HTML代码

<inputtype="text"name="first_name"placeholder="你的姓名..."/>

你也看见了,需要做的只是在文本框的声明标签上加入placeholder属性。完全不需要JavaScript来创造这种效果。

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

因为placeholder是一种新属性,很有必要检查一下你的浏览器是否支持它,比如IE6、IE8肯定是不支持的:

1.functionhasPlaceholderSupport(){

2.varinput=document.createElement('input');

3.return('placeholder'ininput);

4.}

5.

如果用户的浏览器不支持placeholder特征,你需要借助MooTools, Dojo, 或其它JavaScript工具来实现它:

1./*mootoolsftw!*/

2.varfirstNameBox=$('first_name'),

3.message=firstNameBox.get('placeholder');

4.firstNameBox.addEvents({

5.focus:function(){

6.if(firstNameBox.value==message){searchBox.value='';}

7.},

8.blur:function(){

9.if(firstNameBox.value==''){searchBox.value=message;}

10.}

11.});

12.

用CSS美化placeholder

前一篇文章里我写了如何用CSS美化鼠标选择的文字。在进一步研究时我发现了另外一个有趣的CSS功能:CSS美化INPUT placeholder效果。下面让我来用简单的CSS代码美化文本框里的placeholder文字。

CSS代码

火狐浏览器里的用法和谷歌浏览器里不太一样。它们的名称都很好理解:

1./*all*/

2.::-webkit-input-placeholder{color:#f00;}

3.::-moz-placeholder{color:#f00;}/*firefox19+*/

4.:-ms-input-placeholder{color:#f00;}/*ie*/

5.input:-moz-placeholder{color:#f00;}

6.

7./*inpidual:webkit*/

8.#field2::-webkit-input-placeholder{color:#00f;}

9.#field3::-webkit-input-placeholder{color:#090;background:lightgreen;text-transform:uppercase;}

10.#field4::-webkit-input-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}

11.

12./*inpidual:mozilla*/

13.#field2::-moz-placeholder{color:#00f;}

14.#field3::-moz-placeholder{color:#090;background:lightgreen;text-transform:uppercase;}

15.#field4::-moz-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999;}

16.

到此,相信大家对“html中placeholder属性的详细介绍”有了更深的了解,不妨来实际操作一番吧!这里是本站网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!