快捷導(dǎo)航

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

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

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

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

方案一：

摒棄原始屬性placeholder，為input添加一個(gè)兄弟節(jié)點(diǎn)span，并為span設(shè)置絕對(duì)定位（父節(jié)點(diǎn)為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;">手機(jī)號(hào)碼/郵箱地址</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;">請(qǐng)輸入密碼</span>
  </div>
</li>

js代碼如下（簡(jiǎn)單寫(xiě)了個(gè)函數(shù)，沒(méi)寫(xiě)插件形式，呵呵）：

function _placeholderText(phInput, phText) { //定義函數(shù)，傳遞2個(gè)參數(shù)——input輸入框和text提示文本的id或者class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //頁(yè)面加載時(shí)遍歷所有仿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() { //點(diǎn)擊提示信息，input獲取焦點(diǎn)
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { //為input注冊(cè)事件，value值改變（其實(shí)是屬性發(fā)生變化）時(shí)以及失去焦點(diǎn)時(shí)判斷value值是否為空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

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

個(gè)人總結(jié)：方案一適用于登錄頁(yè)面，但對(duì)于后臺(tái)form表單及前臺(tái)的搜索頁(yè)面不太適合，因?yàn)橐黾有碌奶崾疚谋緲?biāo)簽，不太友好。

方案二：

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

function inputJsDIY(obj, colorTip, colorTxt) { //定義函數(shù)，傳遞3個(gè)參數(shù)——DOM對(duì)象、提示文本的顏色值、輸入文本的顏色值
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //輸入框顏色默認(rèn)置為提示文本的顏色值
    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() { //獲取焦點(diǎn)時(shí)做判斷
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //失去焦點(diǎn)時(shí)做判斷
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //提交表單時(shí)去除提示文本（把提示文本置空）
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //調(diào)用函數(shù)

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

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

方案三：

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

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

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

您可能感興趣的文章: