placeholder(html中placeholder屬性的詳細介紹)

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屬性的詳細介紹”有了更深的了解,不妨來實際操作一番吧!這里是本站網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!