HTML 5 placeholder 屬性 實現搜索框提示文字點擊輸入後消失

H5以前要實現這個功能還要用到JS，H5出來以後新增長了placeholder屬性，有了這個屬性就就能輕鬆實現這個功能。

定義和用法

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

該提示會在輸入字段爲空時顯示，並會在字段得到焦點時消失。

註釋：placeholder 屬性適用於如下的 <input> 類型：text, search, url, telephone, email 以及 password。（此處來自W3cSchool）

<form name="search" class="search" method="post">
　　<input type="text" name="searchname" class="search_in" placeholder="請輸入您要搜索的關鍵字"  />
　　<input type="submit" name="send" class="search_butt" value="搜索" />
</form>

 以上是H5實現的代碼。

<form name="search" class="search" method="post">
　　<input type="text" name="searchname" class="searchinput" value="請輸入您要搜索的關鍵字" 
　　onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='請輸入您要搜索的關鍵字';" 
　　onfocus="if(this.value=='請輸入您要搜索的關鍵字')value='';" />
　　<input type="submit" name="send" class="search_butt" value="搜索" />
</form>

 以上是H5以前的實現方式

輸入前的效果

輸入後的效果