placeholder 屬性的相容性

標籤：

placeholder是html5新增的一個屬性，當input或者textarea設定了該屬性後，該值的內容將作為灰字提示顯示在文字框中，當文字框獲得焦點（或輸入內容）時，提示文字消失。

但是在不支援html5的低版本的瀏覽器中，placeholder屬性是無效的，例如ie9及以下的ie瀏覽器不相容這個屬性。下面介紹placeholder相容性的處理

在頁面添加如下指令碼

 

$(function() {  // 如果不支援placeholder，用jQuery來完成  if(!isSupportPlaceholder()) {    // 遍曆所有input對象, 除了密碼框    $(‘input‘).not("input[type=‘password‘]").each(      function() {        var self = $(this);        var val = self.attr("placeholder");        input(self, val);      }    );        /**//* 對password框的特殊處理     * 1.建立一個text框      * 2.擷取焦點和失去焦點的時候切換     */    $(‘input[type="password"]‘).each(      function() {        var pwdField    = $(this);          var pwdVal      = pwdField.attr(‘placeholder‘);          var pwdId       = pwdField.attr(‘id‘);          // 重新命名該input的id為原id後跟1        pwdField.after(‘<input id="‘ + pwdId +‘1" type="text" value=‘+pwdVal+‘ autocomplete="off" />‘);          var pwdPlaceholder = $(‘#‘ + pwdId + ‘1‘);          pwdPlaceholder.show();          pwdField.hide();                    pwdPlaceholder.focus(function(){            pwdPlaceholder.hide();            pwdField.show();            pwdField.focus();          });                    pwdField.blur(function(){            if(pwdField.val() == ‘‘) {              pwdPlaceholder.show();              pwdField.hide();            }          });        }    );  }});// 判斷瀏覽器是否支援placeholder屬性function isSupportPlaceholder() {  var input = document.createElement(‘input‘);  return ‘placeholder‘ in input;}// jQuery替換placeholder的處理function input(obj, val) {  var $input = obj;  var val = val;  $input.attr({value:val});  $input.focus(function() {    if ($input.val() == val) {      $(this).attr({value:""});    }  }).blur(function() {    if ($input.val() == "") {            $(this).attr({value:val});    }  });}

參考資料：  placeholder相容性   http://www.studyofnet.com/news/1022.html

placeholder 屬性的相容性