HTML5 placeholder

1、HTML5 placeholder相關的引言

placeholder在英漢詞典中解釋成了「佔位符」。要理解並不難，請看此場景：

「咦？」您可能會疑問，「這不是就是狗狗樹下撒尿尿」。確實，該場景能夠較好的詮釋placeholder「佔位符」之意。咱們不妨將placeholder來個臨時拆分：place + hold + er.

對於上面場景就有：place指樹及附近區域；hold表示鎮住了其餘狗狗——此處爲灑家的地盤；而er則將重點轉到了尿上。因而，在這個例子中，placeholder指的就是：「足以鎮住這塊區域的狗狗的尿」，即「佔據樹木的尿」，簡稱爲「佔樹尿」；至此，「佔位符」之意就很好理解了，也就是「佔據位置的字符」。不管是傳統軟件或是web應用中，這個玩意都是至關常見的，瞪大眼睛隨便瞄瞄，得，立馬有了~~

如我FireFox瀏覽器右上方的搜索佔位符：

或是當前我寫這篇文章的後臺頁面的右側加標籤的小框框：

在可輸入控件中，「佔位符」通常做提示用，簡潔明瞭，空間利用率高。然而，在XHTML的時代，控件元素並無placeholder這一屬性，所以，咱們的作法都是經過JavaScript作模擬，例以下面這個未分離的不推薦的寫法：

<input value="@zhangxinxu" onfocus="javascript:if(this.value='@zhangxinxu'){this.value='';}" onblur="javascript:if(!this.value){this.value='@zhangxinxu';}" />

效果就是下面這個：

時代老是不斷變化的，在HTML5中，想input文本框或是textarea文本域已經有了佔位符功能，其屬性名就是placeholder。

最基本例子：

<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" /> 

您能夠狠狠地點擊這裏：HTML5佔位符基本實例demo

目前，現代瀏覽器均早已支持placeholder佔位符屬性。好定西不用白不用啊，所以，在前年，我就將HTML5的placeholder佔位符屬性應用在實際項目中了。在這一年多的應用中，仍是有些磕磕碰碰，在此做爲經驗分享下。一來加深你們與placeholder的認識，二是但願你們能夠積極大膽應用一些HTML5的新特性。

而後，還要對佔位符的一些應用作擴展。本文內容多而雜，不過都是些值得花時間咀嚼的東西。

2、placeholder的瀏覽器表現差別

這裏的瀏覽器指：FireFox, Opera, Chrome. IE瀏覽器由於沒有買到回程的火車票還在家裏頭過年呢！

在佔位符基本demo中，偶們是看不到什麼本質差別。都是默認淡灰色，填寫的字符都是黑色。那差別在何處呢？

咱們作點小動做，就能夠看出差別來了：

input { color: #333; }

添加相似上面的一段CSS代碼，結果就有差異了~~

在FireFox瀏覽器下，佔位的默認字符顏色變成#333咯；可是，Chrome瀏覽器以及Opera瀏覽器都是堅決的淡灰色。具體參見下面截圖們：
  

您能夠狠狠地點擊這裏：出現瀏覽器兼容性差別的demo

緣由？
爲什麼FireFox瀏覽器下會有如此表現，我以爲應該是FireFox瀏覽器哪裏搞錯了。input選擇器覆蓋了系統表單樣式forms.css中的以下CSS：

input:-moz-placeholder, textarea:-moz-placeholder {     color: graytext; }

以下小Bug下窺視的截圖：

而實際上，根據個人理解，標籤+僞類選擇器的優先級要高於單純的標籤選擇器。或許是對於系統CSS，FireFox瀏覽器走了本身的獨木橋吧；而Chrome和Opera瀏覽器則是走的陽關道，即便以下設置：

input { color: #333!important; }

文本框依然是hold住的淡灰色文字效果。

實際問題
要想FireFox瀏覽器下placeholder文字默認灰色文本顯示，須要不對input/textarea重置文字顏色。However, input等控件默認顏色是純黑色，對顏色挑剔的設計師們想必難以容忍這不和諧的黑色，因而乎，input/textarea的顏色重置在所不免，因而就有了上面展現的問題。

修復
之前，由於經驗不足，對placeholder的理解不深，對於FireFox瀏覽器下的這樣顯示差別是藉助於JavaScript腳本修復的（經過JS改變元素的color）。如今知道了，這徹底是公公背媳婦過河——吃力不討好啊！

較好的作法是使用CSS再次cover一遍，以下：

input { color: #333; } /* recover again */ input:-moz-placeholder { color: #999; }

因而乎，FireFox下含有placeholder屬性的文本控件們默認顏色又是灰色滴啦~~

顏色自定義
固然，若是您不喜歡沉悶的灰色，能夠經過CSS重置placeholder佔位符顏色。FireFox瀏覽器天然就是上面的:-moz-placeholder. 那對於其餘現代瀏覽器呢？是否是就是:-webkit-placeholder以及:-o-placeholder呢？

嘿嘿，sorry，不是的！

對於Chrome瀏覽器，可使用：

::-webkit-input-placeholder { color:#34538b; }

對於Opera瀏覽器，雖然Opera 11版本中已經支持了placeholder, 可是目前還不支持其佔位符顏色的自定義。

Opera 11 supports placeholders too, but you cannot style it (yet), and it is limited to input elements. In Opera 11.50 textarea placeholders are implemented too.

您能夠狠狠地點擊這裏：placeholder顏色自定義demo

3、情何以堪的IE瀏覽器

IE瀏覽器就像是城隍廟的烏龜，一片固定區域慢慢地爬來爬去。口頭上說本身對HTML5的支持怎麼樣怎麼樣，可是跟其餘現代瀏覽器比起來，能夠本身挖個洞跳進去了。想必都知道：IE6~IE9都不支持HTML5 placeholder. 咱們要想漸進使用placeholder, 對於IE瀏覽器，必需要藉助JavaScript交互了。

天然，處理這類兼容性有關的問題，少不了瀏覽器的判斷。這裏要判斷的不是是否是IE(因之後IE會支持), 而是是否支持placeholder屬性。以下檢測代碼：

var isPlaceholderSupport = "placeholder" in document.createElement("input");

因而，咱們就能夠自定義一個模擬placeholder效果的方法，以下代碼：

var funPlaceholder = function(element) {     var placeholder = '';     if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {         element.onfocus = function() {             if (this.value === placeholder) {                 this.value = "";             }             this.style.color = '';         };         element.onblur = function() {             if (this.value === "") {                 this.value = placeholder;                 this.style.color = 'graytext';                 }         };                  //樣式初始化         if (element.value === "") {             element.value = placeholder;             element.style.color = 'graytext';             }     } };

上面代碼原生JS，不依賴JS庫，能夠湊合使用，不過使用DOM level 1, 沒法承受多交互。您能夠根據本身實際需求作修改！

您能夠狠狠地點擊這裏：IE瀏覽器下placeholder模擬

一些經驗
爲了避免影響支持placeholder屬性的瀏覽器上的表現，IE瀏覽器下默認placeholder佔位符的顯示，以及文本灰色應該交由JavaScript完成，而不是經過HTML設置，以下作法是不可取的：

<input type="email" placeholder="zhangxinxu@zhangxinxu.com" value="zhangxinxu@zhangxinxu.com" style="color:graytext;" size="26" /> 

對於現代瀏覽器，value值即便與placeholder同樣到原子級，其仍是看成value，也就是鼠標focus時候，值不會變；同時color:graytext的設置讓正常文本的顏色也置灰了，這是糟糕的。

4、當遇到自定義下拉

這年頭，塗鴉的都能億萬富翁，沒什麼事情遇不到的。placeholder當然犀利，可是，某些情形下，其也會蛋疼菊緊。

以下實例，您能夠狠狠地點擊這裏：當placeholder遇到自定義下拉

文本框focus的時候，自定義下拉顯示。點擊下拉列表元素，若是速度不是很快，你會發現，佔位符先填充了文本框，然後選擇內容才進入！這是由於click事件慢於blur事件。

可是，在瀏覽器自帶下拉中木有此問題：

解決
這能夠說是很無解的問題。通常，這類問題的作法是將自定義列表的click事件換成mousedown事件。例如，攜程旅遊網首頁選擇日期那塊：

5、表單序列化 – 腳本模擬placeholder的侷限

這裏所說的腳本模擬是指上面經過value值改變模擬placeholder的方法。

value模擬法的侷限性有兩個：
其一是value值扮演了兩個角色：當value值和placeholder值相等時，value值就變成了placeholder，其他時候仍是value.

這很好理解，小張看見A女就裝富二代，其餘時候是實打實地和B女作朋友。只要不是蒙牛喝多的人都知道，一旦A女和B女同時出現，小張就麻煩咯 – 由於他不是鳴人，沒法影分身！相似地，若是實際上的value與placeholder相等，value是沒法同時扮演兩個身份滴，因而，problem來了~~~~

其二就是佔位符充當了value的角色，因而，在表單序列化（或原生的表單提交）的時候，相似「請輸入姓名」這樣的文字就會誤認爲是輸入value值而被遍歷或提交了。

在實際狀況中，第一個侷限性不多出現，也容易避免，所以，沒什麼擔心和說頭的。可是，第二個侷限 – 表單序列化倒是個麻煩的東西！

問題顯現
您能夠狠狠地點擊這裏：value模擬法表單序列化下的問題

靠譜瀏覽器下點擊demo頁面按鈕則結果很OK：

可是，諸如IE這樣，使用value模擬placeholder屬性的瀏覽器就直接中槍了：

怎麼辦？
顯然，使用value模擬placeholder不能應付全部狀況。好在，咱們還有另一種模擬方法，使用label標籤，稱爲label模擬法。

6、label模擬法

這是方法是經過建立或直接使用label標籤元素來模擬。可使用label元素覆蓋，或是藏於文本控件的下方（此時文本控件背景須要transparent透明）。咱們先看幾個應用實例：

淘寶首頁搜索的小圖標的placeholder效果就是使用的該方法：

不過，爲了方便學習，咱們仍是看簡單通俗易懂的例子。您能夠狠狠地點擊這裏：label模擬法demo

上面demo在現代瀏覽器下依然使用的自帶placeholder特性，IE瀏覽器下則是使用label建立的佔位符效果。咱們用IE開發工具簡單窺探一下，就能夠看到建立的佔位符元素了（此時文本框的value是空的）：

限於相關代碼篇幅相對長了點，這裏就不展現了，您有興趣能夠在demo頁面上查看。

問題
demo頁面只是大體效果，其中還有些狀況並無處理。例如你想右鍵 → 粘貼內容的時候。

緣由在與這裏的label佔位符是採用覆蓋的形式顯示在文本框上的，因而，當咱們右鍵文本框的時候，其實是右鍵的label元素（非可編輯），所以，咱們沒法經過鼠標粘貼內容。

佔位符文字越長，該問題出現的概率就越大。

要解決這個問題，較好的作法是經過CSS/HTML解決，即label元素藏於文本框的下方，可是，文本框背景透明以顯示下面的佔位符文字。若是想經過事件解決，比較折騰，講起來又是囉哩吧嗦，這個暫時先放着。

還有一個問題就是，label元素中提示的文字長度不能超過文本控件的長度~~

7、拓展：新的佔位符交互形式實現

隨着交互體驗，以及一些潮流趨勢的方法。出現了一種新的佔位符交互體驗方式，想必使用hotmail時候都注意到了，帳戶佔位符提示focus的時候並非把佔位符的內容隱掉，而是半透明瞭。還有Opera瀏覽器攜帶的搜索引擎框的提示效果也是如此。

當前，在web開發中，也有此形式的佔位符交互效果：

QQ郵箱登錄(http://mail.qq.com)
以下截圖啦：

我在上面一個demo相似原理上作了下修改，製做了一個這樣子交互效果的demo，但願對有興趣的同行能幫上點忙，您能夠狠狠地點擊這裏：透明度變化的佔位符交互demo

上面的demo必須在不支持placeholder屬性的瀏覽器下才看獲得效果。下截圖來自IE9瀏覽器：

一樣的，相關代碼參考demo頁面。一樣是覆蓋形式的label元素，右鍵上下文是有問題的。

8、綜合：placeholder模擬jQuery插件

最後，附上一個結合了上面諸如討論的placeholder模擬插件 – jquery.placeholder.js（很小，加上註釋一百多行）

是本身今兒個晚上冒着家庭不和氣的危險寫的（元宵節啊，晚飯後跑公司來了），急急忙忙，簡單測試了下，往後有些bug再修補修補。

使用
1. JS部分
以下最簡單示例：

<script src="jquery1.7.1-min.js"></script> <script src="jquery.placeholder.js"></script> <script> $(function() {     $("#test").placeholder();	 }); </script>

2. 對應HTML
上面腳本對應HTML代碼以下：

<input id="test" placeholder="測試" />

參數
插件相關參數參見下表：

標題	描述	默認
labelMode	布爾型 是否使用label標籤模擬佔位符效果。默認爲false，表示使用value模擬法	false
labelStyle	對象 若是使用label模擬法，則建立的label元素重置的或新的樣式集	{}
labelAlpha	布爾型 若是使用label模擬法，其交互方式是否使用透明度切換的形式。默認爲false，表示使用值顯示與不顯示這種交互	false
labelAcross	布爾型 若是使用label模擬法，同時交互方式是透明度切換，是否讓全部的瀏覽器都是這種效果（重置現代瀏覽器默認placeholder交互效果）。默認爲false，表示瀏覽器默認使用自帶placeholder交互效果。	false

實例頁面
您能夠狠狠地點擊這裏：jquery.placeholder.js插件簡單測試demo

小小demo頁面截圖一張（後因第二天添加了如何讓「label提示文字在文本框下方顯示」實例，所以demo實際模樣與下面有些小出入）：

說明

1. 插件支持value模擬法和label模擬法；並且label模擬法支持新式的透明度交互效果；並且能夠設置是否讓FireFox, Chrome這些瀏覽器也以這種形式交互。
2. 使用label模式模擬佔位符的時候，若是文本控件沒有id，則插件會自動建立一個隨機id.
3. 由於考慮到插件化，讓插件藏在元素底部是不顯示的（由於不能強行設置文本控件背景透明），所以插件的label元素都是覆蓋在文本控件上模擬佔位符效果的。所以，右鍵上下文是有問題的。插件對此所作的處理就是把佔位符上下文的事件給牆掉了。您能夠經過labelStyle參數改變佔位符label元素的層級啊，位置什麼的完善這個小問題。
4. 事件倉促，bug確定有。若是有幸被您使用了，同時發現了問題，歡迎提交bug.

9、快速結語

在這和諧的日子，我還頂着壓力過來折騰文章，不容易啊。想一想之前，想寫到何時就何時，如今沒那麼自由了。一晃23:00, 我必需要撤了。本文的結語啊什麼的就委屈下，不讓大家出來表演了。

感謝您spend這麼多time閱讀到here! 

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2169