HTML 5 <input> placeholder 屬性HTML 5 <input> placeholder 屬性

原文連結：http://www.w3school.com.cn/html5/att_input_placeholder.asp

HTML 5 <input> placeholder 屬性

HTML 5 <input> 标簽

執行個體

帶有 placeholder 文本的搜尋字段：

<form action="demo_form.asp" method="get">
  <input type="search" name="user_search"          placeholder="Search W3School"                 />
  <input type="submit" />
</form>
      

親自試一試

定義和用法

placeholder 屬性提供可描述輸入字段預期值的提示資訊（hint）。

該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

注釋：placeholder 屬性适用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

HTML 4.01 與 HTML 5 之間的差異

placeholder 屬性是 HTML5 中的新屬性。

文法

<input placeholder="text">      

屬性值

值	描述
text	規定用于驗證輸入字段的模式。

但是在firefox，IE下都能實這個效果，chrome和safari點選後不會消失，得輸入東西之後才會消失。

在CSS中加入以下代碼即可實作：

input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder
{
color: transparent;
}      

原理為：将placeholder提供的提示資訊文字的顔色設定為"transparent"(透明)。

作者：

Candyメ奶糖

出處：

http://www.cnblogs.com/Candies/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。

博文來源廣泛，如原作者認為我侵犯知識産權，請盡快給我發郵件

[email protected]

聯系，我将以第一時間删除相關内容。