IE8 不支持html5 placeholder的解决方案

　　IE8不支持html5 placeholder的解决方法。

/**

 * jQuery EnPlaceholder plug

 * version 1.0                            2014.07.01戈志刚

 * by Frans.Lee <[email protected]>  http://www.ifrans.cn

 */

(function ($) {

    $.fn.extend({

        "iePlaceholder":function (options) {

            options = $.extend({

                placeholderColor:'#999',

                isUseSpan:true,

                onInput:true

            }, options);

            $(this).each(function () {

                var _this = this;

                var supportPlaceholder = 'placeholder' in document.createElement('input');

                if (!supportPlaceholder) {

                    var defaultValue = $(_this).attr('placeholder');

                    var defaultColor = $(_this).css('color');

                    if (options.isUseSpan == false) {

                        $(_this).focus(function () {

                            var pattern = new RegExp("^" + defaultValue + "$|^$");

                            pattern.test($(_this).val()) && $(_this).val('').css('color', defaultColor);

                        }).blur(function () {

                                if ($(_this).val() == defaultValue) {

                                    $(_this).css('color', defaultColor);

                                } else if ($(_this).val().length == 0) {

                                    $(_this).val(defaultValue).css('color', options.placeholderColor)

                                }

                            }).trigger('blur');

                    } else {

                        var $imitate = $('<span class="wrap-placeholder" style="position:absolute; display:inline-block; overflow:hidden; color:'+options.placeholderColor+'; width:'+$(_this).width()+'px; height:'+$(_this).outerHeight()+'px;">' + (defaultValue==undefined?"":defaultValue) + '</span>');

                        //hg-add

                        $(_this).focus(function(){

                            $imitate.hide();

                        }).blur(function () {

                                    /^$/.test($(_this).val()) && $imitate.show();

                                });

                        $imitate.css({

                            'margin-left':$(_this).css('margin-left'),

                            'margin-top':$(_this).css('margin-top'),

                            'text-align':'left',

                            'font-size':$(_this).css('font-size'),

                            'font-family':$(_this).css('font-family'),

                            'font-weight':$(_this).css('font-weight'),

                            'padding-left':parseInt($(_this).css('padding-left')) + 2 + 'px',

                            'line-height':_this.nodeName.toLowerCase() == 'textarea' ? $(_this).css('line-weight') : $(_this).outerHeight() + 'px',

                            'padding-top':_this.nodeName.toLowerCase() == 'textarea' ? parseInt($(_this).css('padding-top')) + 2 : 0

                        });

                        $(_this).before($imitate.click(function () {

                            $(_this).trigger('focus');

                        }));

                        $(_this).val().length != 0 && $imitate.hide();

                        if (options.onInput) {

                            var inputChangeEvent = typeof(_this.oninput) == 'object' ? 'input' : 'propertychange';

                            $(_this).bind(inputChangeEvent, function () {

                                $imitate[0].style.display = $(_this).val().length != 0 ? 'none' : 'inline-block';

                            });

                        } else {

                            $(_this).focus(function () {

                                $imitate.hide();

                            }).blur(function () {

                                    /^$/.test($(_this).val()) && $imitate.show();

                                });

                        }

                    }

                }

            });

            return this;

        }

    });

})(jQuery);

/*调用方式： textarea需要田间onInput=false属性*/

$('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});

$(document).ready(function(){

            if (typeof (Worker) == "undefined"){

                $('input[placeholder], textarea[placeholder]').each(function(){$(this).is('input')?$(this).iePlaceholder():$(this).iePlaceholder({onInput: false});});

            }

            });

　　测试html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <!--便于页面更好的在移动平台上展示。

        <meta name="viewport" content="initial-scale=1.0,user-scalable=no">

        -->

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta http-equiv="Content-Language" content="utf-8" />

        <meta name="author" content="Gezhigang" />

        <title>placeholder</title>

        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

        <script type="text/javascript" src="placeholder.js"></script>

    </head>

    <body>

        <div style="margin-left: 30%;margin-top: 10%;">

            <form>

                <table>

                    <tr>

                        <td height="30px">用户名</td>

                        <td><input type="text" placeholder="这里输入帐号。。。"/></td>

                    </tr>

                    <tr >

                        <td height="30px">密码</td>

                        <td><input type="text" placeholder="这里输入密码。。。"/></td>

                    </tr>

                    <tr>

                        <td>&nbsp;</td>

                        <td><input type="submit" value="会员登录" /></td>

                    </tr>

                </table>

            </form>

        </div>

    </body>

</html>

　　测试例子