HTML5 的新屬性：Placeholder

網頁表單的文字方塊 有時會有看到預設的說明文字 像這樣：

輸入時 字會自動消失

以前的方式是要用js 

語法差不多會是

<input name="user_name" type="text" size="28" id="user_name" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';}">

但我不要他真的value啊~~

html5 裡  只要多寫個  placeholder='XXX'  就能做到了


但但但  很sad  因為很多人的browser (正確來說是很多的ie==)  不支援

所以 又找到了jquery的用法

$(function() {
 $('input, textarea').placeholder();
});

範例網頁：
http://mathiasbynens.be/demo/placeholder

(除了範例 下面也有寫開啟的這個瀏覽器支不支援placeholder)


除了jquery的js要有 接下來：

step1
<script src="jquery.placeholder.js"></script>

step2
<script>
    $(function() {
        $('input, textarea').placeholder();  
    });
</script>

step3
<input type="text" id="popupDatepickerDate" name="bDate" value="<s:property value="bDate"/>"  placeholder="這裡要填生日"/>


如果bDate很不幸是從request來...
<input type="text" id="popupDatepickerDate" name="bDate" value="<s:property value="bDate"/>"  placeholder="<s:property value="%{#request['bDateR']}為預設生日"/>"/>


ps

在struts2 的tag 也可以唷
  <s:textfield name="memberName" value="%{#request['memberName']}" placeholder="這裡填姓名" />



如果 placeholder裡的文字 是一個變數的話
 <s:textfield name="memberName"  placeholder="%{fieldDescr}" />


如果 placeholder裡的文字 是一個設定檔的變數：
 <s:textfield name="memberName"  placeholder="%{getText('fieldDescr')}" />


相關資料：
http://stackoverflow.com/questions/15436125/the-best-placeholder-polyfil-script-for-ie7-ie8-and-ie9
http://www.actzero.jp/developer/report-2794.html



找到相關資料的關鍵字  ：javascript tips textarea