實現(xiàn)placeholder效果的方案匯總

更新時間：2015年06月11日 11:45:07 投稿：hebedich

由于placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。

placeholder是html5<input>的一個屬性，它提供可描述輸入字段預期值的提示信息（hint），該提示會在輸入字段為空時顯示。高端瀏覽器支持此屬性（ie10/11在獲得焦點時文字消失），ie6/7/8/9則不支持。為了兼容各主流瀏覽器并使其呈現(xiàn)效果保持一致，以下三套方案僅供參考。

方案一：

摒棄原始屬性placeholder，為input添加一個兄弟節(jié)點span，并為span設(shè)置絕對定位（父節(jié)點為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代碼如下（簡單寫了個函數(shù)，沒寫插件形式，呵呵）：

function _placeholderText(phInput, phText) { //定義函數(shù)，傳遞2個參數(shù)——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值改變（其實是屬性發(fā)生變化）時以及失去焦點時判斷value值是否為空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //調(diào)用函數(shù)

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

方案二：

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

function inputJsDIY(obj, colorTip, colorTxt) { //定義函數(shù)，傳遞3個參數(shù)——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'); //調(diào)用函數(shù)

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

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

方案三：

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

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

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: