placeholder是html5<input>的一個屬性，它提供可描述輸入字段預期值的提示信息（hint）， 該提示會在輸入字段為空時顯示。高端瀏覽器支持此屬性（ie10/11在獲得焦點時文字消失），ie6/7/8/9則不支持。為了兼容各主流瀏覽器并使其呈現效果保持一致，以下三套方案僅供參考。
方案一：
摒棄原始屬性placeholder，為input添加一個兄弟節點span，并為span設置絕對定位（父節點為position: relative;），使其位于input之上。html代碼片段如下：
<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代碼如下（簡單寫了個函數，沒寫插件形式，呵呵）：
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代碼如下：
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表單和前臺搜索頁面更傾向于方案二，簡單有效，只是在獲得焦點時提示文本消失。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
