實現placeholder效果的方案匯總

 方案一：

摒棄原始屬性placeholder，為input添加一個兄弟節點span，並為span設置絕對定位（父節點為position: relative;），使其位於input之上。html代碼片段如下：

1 2 3 4 5 6 7 8 9 10 11 12 <li> <div class="inputMD" style="position: relative;"> <input class="phInput" type="text" /> <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手機號碼/郵箱地址</span> </div> </li> <li> <div class="inputMD" style="position: relative;"> <input class="phInput" type="password" /> <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">請輸入密碼</span> </div> </li>

js代碼如下（簡單寫了個函數，沒寫插件形式，呵呵）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 function _placeholderText(phInput, phText) { //定義函數，傳遞2個參數——input輸入框和text提示文本的id或者class var $input = $(phInput); var $text = $(phText); $input.each(function() { //頁面加載時遍歷所有仿placeholder的input var _this = $(this); var _text = _this.siblings(phText); if($.trim(_this.val()) == '') { _this.val(""); _text.show(); } else { _text.hide(); } }); $text.on('click', function() { //點擊提示信息，input獲取焦點 $(this).siblings(phInput).focus(); }); $input.on('input propertychange blur', function() { //為input注冊事件，value值改變（其實是屬性發生變化）時以及失去焦點時判斷value值是否為空 var _this = $(this); if(_this.val() == '') { _this.siblings(phText).show(); } else { _this.siblings(phText).hide(); } }); }   _placeholderText('.phInput', '.phText'); //調用函數

個人總結：方案一適用於登錄頁面，但對於後台form表單及前台的搜索頁面不太適合，因為要增加新的提示文本標簽，不太友好。

方案二：

同樣摒棄原始屬性placeholder，為<input>添加一個屬性phText="手機號碼/郵箱地址"。默認狀態下，value值為提示文本並且顏色為灰色；<input>獲得焦點時，若value值等於phText屬性值，則value值置空；<input>失去焦點時，若value值為空，則value值為提示文本。js代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 function inputJsDIY(obj, colorTip, colorTxt) { //定義函數，傳遞3個參數——DOM對象、提示文本的顏色值、輸入文本的顏色值 colorTip = colorTip || '#aaaaaa'; colorTxt = colorTxt || '#666666'; obj.each(function() { var _this = $(this); _this.css({"color": colorTip}); //輸入框顏色默認置為提示文本的顏色值 if($.trim(_this.val()) == "") { //判斷value值是否為空，若為空則value值賦值等於提示文本 _this.val(_this.attr("phText")); } else if(_this.val() != _this.attr("phText")) { _this.css({"color": colorTxt}); //正常的輸入文本顏色值 } }); obj.on("focus", function() { //獲取焦點時做判斷 var _this = $(this); var value = _this.val(); if(value == _this.attr("phText")) { _this.val(""); } _this.css({"color": colorTxt}); }); obj.on("blur", function() { //失去焦點時做判斷 var _this = $(this); var value = _this.val(); if($.trim(value) == "") { _this.val($(this).attr("phText")).css({"color": colorTip}); } }); obj.parents("form").on("submit", function() { //提交表單時去除提示文本（把提示文本置空） obj.each(function() { var _this = $(this); if(_this.val() == _this.attr("phText")) { _this.val(""); } }); }); }   inputJsDIY($('.phInput'), '#aaa', '#666'); //調用函數

個人總結：方案二比較適合後台頁面form表單及前台搜索頁面，操作簡單，無附加標簽。缺點是不能用於password類型的<input>，而且<input>獲得焦點時的提示文本消失（value值等於phText屬性值時），這一點與原始的placeholder屬性不同。

另外，也可以把phText屬性改為placeholder屬性，支持的浏覽器呈現原始效果，不支持的浏覽器通過js判斷{'placeholder' in document.createElement('input')}調用方案二中的函數。此折中方案也有其缺點，各浏覽器呈現的效果不完全一樣。

方案三：

為不支持placeholder的浏覽器寫一個方法，首先把placeholder值賦給<input>並且顏色置為灰色，然後<input>獲得焦點時判斷value值等於placeholder值的話，把光標移至最前面（this.createTextRange和this.setSelectionRange）。當發生輸入操作時，先把value值置為空，然後再接收輸入值。另外，對於<input type="password">要為其新增一個<input type="text">用來顯示提示文本，當發生輸入操作時，需要把<input type="text">隱藏，然後把<input type="password">顯示出來並讓其獲得焦點。此方案也有一些小缺陷，那就是當用鼠標右鍵粘貼時會出現bug。

總體上來講，幾種方案各有優缺點。登錄頁面我更傾向於使用方案一，呈現效果完全一致，僅僅是增加個新標簽也不算麻煩。後台form表單和前台搜索頁面更傾向於方案二，簡單有效，只是在獲得焦點時提示文本消失。