輸入欄位出現灰色提示字

  • 20792
  • 0
  • CSS
  • 2014-11-28

輸入欄位出現灰色提示字

使用程式語言:JavaScript,CSS。

代碼如下:

<input type="text" id="nickname" name="nickname" value="請填寫"

onFocus="if(value==defaultValue){value='';this.style.color='#000'}"

onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999">

 

--------------------------------------------------------------------------------------------------------------------------

自從有HTML5之後,這個功能有更簡便的寫法,

只要在input標籤裡面添加placeholder屬性即可。

寫法如下:

<input type="text"  id="nickname" name="nickname" placeholder="請填寫">

設定CSS讓字變色:

:-webkit-input-placeholder{    /*Webkit browsers*/

      color:#999;

}

:-moz-placeholder{                 /*Mozilla Firefox*/

      color:#999;

     opacity:1;

}

:-ms-input-placeholder{          /*Internet Explorer 10+*/

      color:#999;

}

 

如果不確定自己瀏覽器是否支援HTML5可以參考此網址:

http://fmbip.com/litmus/

 

 

 

參考或是複製語法時,別忘了留個言喔 ^ ^ ~