實現placeholder效果的方案總結_jquery

placeholder是html5的屬性，它提供可描述輸入欄位預期值的提示資訊（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，為新增一個屬性phText="手機號碼/信箱位址"。預設狀態下，value值為提示文字且顏色為灰色；取得焦點時，若value值等於phText屬性值，則value值置空；失去焦點時，若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類型的，而且取得焦點時的提示文字消失（value值等於phText屬性值時），這點與原始的placeholder屬性不同。

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

方案三：

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

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

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