IE8兼容placeholder的方案

用JavaScript解决Placeholder的IE8兼容问题

placeholder属性是HTML5新添加的属性，当input或者textarea设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失，placeholder可作为输入框的提示文案

如图：

placeholder是常用的属性，它使得input框内有很友好的提示效果。高版本浏览器都支持placeholder属性，但IE9以下版本的浏览器并不支持这一属性。这里用JavaScript实现添加对浏览器的兼容处理。

方案一：jquery实现

（当浏览器不支持placeholder属性时，克隆一个和界面相同的input框，将placeholder的值设置为其value值，覆盖在界面input框所在位置，并将界面上的input隐藏掉）

调用方法： $(#selector).placeholder();(selector泛指css 的 id选择器)

（这里有一个问题，当文本框type=password时，引用此placeholder方案会使暗文密码变成明文密码）

 ;(function(window, document, $) {

     // Opera Mini v7 doesn’t support placeholder although its DOM seems to indicate so
     var isOperaMini = Object.prototype.toString.call(window.operamini) == '[object OperaMini]';
     var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
     var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
     var prototype = $.fn;
     var valHooks = $.valHooks;
     var propHooks = $.propHooks;
     var hooks;
     var placeholder;

     if (isInputSupported && isTextareaSupported) {

         placeholder = prototype.placeholder = function() {
             return this;
         };

         placeholder.input = placeholder.textarea = true;

     } else {

         placeholder = prototype.placeholder = function() {
             var $this = this;
             $this
                 .filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
                 .not('.placeholder')
                 .bind({
                     'focus.placeholder': clearPlaceholder,
                     'blur.placeholder': setPlaceholder
                 })
                 .data('placeholder-enabled', true)
                 .trigger('blur.placeholder');
             return $this;
         };

         placeholder.input = isInputSupported;
         placeholder.textarea = isTextareaSupported;

         hooks = {
             'get': function(element) {
                 var $element = $(element);

                 var $passwordInput = $element.data('placeholder-password');
                 if ($passwordInput) {
                     return $passwordInput[0].value;
                 }

                 return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
             },
             'set': function(element, value) {
                 var $element = $(element);

                 var $passwordInput = $element.data('placeholder-password');
                 if ($passwordInput) {
                     return $passwordInput[0].value = value;
                 }

                 if (!$element.data('placeholder-enabled')) {
                     return element.value = value;
                 }
                 if (value == '') {
                     element.value = value;
                     // Issue #56: Setting the placeholder causes problems if the element continues to have focus.
                     if (element != safeActiveElement()) {
                         // We can't use `triggerHandler` here because of dummy text/password inputs :(
                         setPlaceholder.call(element);
                     }
                 } else if ($element.hasClass('placeholder')) {
                     clearPlaceholder.call(element, true, value) || (element.value = value);
                 } else {
                     element.value = value;
                 }
                 // `set` can not return `undefined`; see http://jsapi.info/jquery/1.7.1/val#L2363
                 return $element;
             }
         };

         if (!isInputSupported) {
             valHooks.input = hooks;
             propHooks.value = hooks;
         }
         if (!isTextareaSupported) {
             valHooks.textarea = hooks;
             propHooks.value = hooks;
         }

         $(function() {
             // Look for forms
             $(document).delegate('form', 'submit.placeholder', function() {
                 // Clear the placeholder values so they don't get submitted
                 var $inputs = $('.placeholder', this).each(clearPlaceholder);
                 setTimeout(function() {
                     $inputs.each(setPlaceholder);
                 }, 10);
             });
         });

         // Clear placeholder values upon page reload
         $(window).bind('beforeunload.placeholder', function() {
             $('.placeholder').each(function() {
                 this.value = '';
             });
         });

     }

     function args(elem) {
         // Return an object of element attributes
         var newAttrs = {};
         var rinlinejQuery = /^jQuery\d+$/;
         $.each(elem.attributes, function(i, attr) {
             if (attr.specified && !rinlinejQuery.test(attr.name)) {
                 newAttrs[attr.name] = attr.value;
             }
         });
         return newAttrs;
     }

     function clearPlaceholder(event, value) {
         var input = this;
         var $input = $(input);
         if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {
             if ($input.data('placeholder-password')) {
                 $input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id'));
                 // If `clearPlaceholder` was called from `$.valHooks.input.set`
                 if (event === true) {
                     return $input[0].value = value;
                 }
                 $input.focus();
             } else {
                 input.value = '';
                 $input.removeClass('placeholder');
                 input == safeActiveElement() && input.select();
             }
         }
     }

     function setPlaceholder() {
         var $replacement;
         var input = this;
         var $input = $(input);
         var id = this.id;
         if (input.value == '') {
             if (input.type == 'password') {
                 if (!$input.data('placeholder-textinput')) {
                     try {
                         $replacement = $input.clone().attr({ 'type': 'text' });
                     } catch(e) {
                         $replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));
                     }
                     $replacement
                         .removeAttr('name')
                         .data({
                             'placeholder-password': $input,
                             'placeholder-id': id
                         })
                         .bind('focus.placeholder', clearPlaceholder);
                     $input
                         .data({
                             'placeholder-textinput': $replacement,
                             'placeholder-id': id
                         })
                         .before($replacement);
                 }
                 $input = $input.removeAttr('id').hide().prev().attr('id', id).show();
                 // Note: `$input[0] != input` now!
             }
             $input.addClass('placeholder');
             $input[0].value = $input.attr('placeholder');
         } else {
             $input.removeClass('placeholder');
         }
     }

     function safeActiveElement() {
         // Avoid IE9 `document.activeElement` of death
         // https://github.com/mathiasbynens/jquery-placeholder/pull/99
         try {
             return document.activeElement;
         } catch (exception) {}
     }

 }(this, document, jQuery));

方案二： js/jQuery实现

实现思路：

1、首先判断浏览器是否支持placeholder属性，如果不支持则使用模拟placeholder

2、创建一个label标签：<label>密码</label> 标签里面的内容为所要添加的提示文字，该文字应该从对应的input|textarea标签取得其placeholder属性值，再将label标签遮盖 到所对应的input|textarea上

3、代码实现如下：

 ; (function (win) {

     win.isPlaceholer = function () {
         var input = document.createElement("input");
         return "placeholder" in input;
     };

     win.placeholder = function () {

         if (!isPlaceholer()) {
             var Placeholder =function (obj) {
                 this.input = obj;
                 var te = obj.getAttribute('placeholder');
                 this.label = document.createElement('label');
                 this.label.innerHTML = te;
                 this.label.id = obj.id + 'Label';
                 this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:14px;';
                 if (obj.value !== '') {
                     this.label.style.display = 'none';
                 }
                 this.init();
             };
             Placeholder.prototype = {

                 getxy: function (obj) {
                     var left, top;
                     if (document.documentElement.getBoundingClientRect) {
                         var html = document.documentElement,
                         body = document.body,
                         pos = obj.getBoundingClientRect(),
                         st = html.scrollTop || body.scrollTop,
                         sl = html.scrollLeft || body.scrollLeft,
                         ct = html.clientTop || body.clientTop,
                         cl = html.clientLeft || body.clientLeft;
                         left = pos.left + sl - cl;
                         top = pos.top + st - ct;
                     } else {
                         while (obj) {
                             left += obj.offsetLeft;
                             top += obj.offsetTop;
                             obj = obj.offsetParent;
                         }
                     }
                     return {
                         left: left,
                         top: top
                     };
                 },

                 getwh: function (obj) {
                     return {
                         w: obj.offsetWidth,
                         h: obj.offsetHeight
                     };
                 },

                 setStyles: function (obj, styles) {
                     for (var p in styles) {
                         obj.style[p] = styles[p] + 'px';
                     }
                 },
                 init: function () {
                     var label = this.label,
                     input = this.input,
                     getXY = this.getxy,
                     xy = this.getxy(input),
                     wh = this.getwh(input);
                     this.setStyles(label, { 'width': wh.w, 'height': wh.h, 'lineHeight': 40, 'left': xy.left + 8, 'top': xy.top });
                     document.body.appendChild(label);
                     label.onclick = function () {
                         this.style.display = "none";
                         input.focus();
                     };
                     input.onfocus = function () {
                         label.style.display = "none";
                     };
                     input.onblur = function () {
                         if (this.value === "") {
                             label.style.display = "block";
                         }
                     };
                     if (window.attachEvent) {
                         window.attachEvent("onresize", function () {
                             var xy = getXY(input);
                             Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
                         });
                     } else {
                         window.addEventListener("resize", function () {
                             var xy = getXY(input);
                             Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
                         }, false);
                     }
                 }
             };

             var inpColl = $("#Box input:visible");//这里是页面上要添加placeholder支持的input
             //var inpColl = document.getElementsByTagName('input'),
             var textColl = document.getElementsByTagName('textarea');//这里是页面上要添加placeholder支持的textarea
             //var lableArr = $("#Box lable");
             var toArray = function (coll) {
                 for (var i = 0, a = [], len = coll.length; i < len; i++) {
                     a[i] = coll[i];
                 }
                 return a;
             };
             var inpArr = toArray(inpColl),
             textArr = toArray(textColl),

             placeholderArr = inpArr.concat(textArr);
             for (var i = 0; i < placeholderArr.length; i++) {
                 if (placeholderArr[i].getAttribute('placeholder') !== null) {

                     new Placeholder(placeholderArr[i]);
                 }
             }
         }

     };
 }(window));

方法执行后界面代码：（lable在页面上）

IE8效果图如下：