js解决IE8、9下placeholder的兼容问题

由于placeholder是html5的新属性，在IE8、IE9下是不能显示的，有兼容性问题。

解决思路：

1.判断目前浏览器是否支持placeholder属性

2.若不支持，则将type="text"的input标签的value值设置为placeholder的值，模拟placeholder效果；若是type="password"，则添加一个type="password"的input元素模拟。

代码：

<div>

    <input id="account"  style="height: 45px; padding: 6px 25px; line-height: 31px" type="text" class="form-control" placeholder="用户名/手机号" >

</div>

<div id="pwdDiv">

    <input id="password"  style="height: 45px; padding:6px 25px; line-height: 31px" type="password" class="form-control" placeholder="密码">

</div>

 (function($){

        //判断浏览器是否支持placeholder属性

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

        //初始化

        var placeholder = function(input){

            var text = input.attr('placeholder');

            var defaultValue = input.defaultValue;

            if(!defaultValue && input.attr('type') == "text"){

                input.val(text);

            }

        };

        //当浏览器不支持placeholder属性时，调用placeholder函数

        if(!supportPlaceholder){

            $('<input id="showpwd"  style="height: 45px; padding:6px 25px;line-height: 31px" type="text" class="form-control" placeholder="密码">').appendTo('#pwdDiv');

            $('#password').hide();

            $('input').each(function(){

                placeholder($(this))

            });

            $("input").focus(function () {

                var placeTexr=$(this).attr("placeholder");

                var value = $(this).attr("value");

               // alert(placeTexr);

                if($(this).attr("id") == "showpwd"){

                    $(this).hide();

                    $('#password').show().focus();

                }else if($(this).attr("type") == "text" && $(this).val() ==placeTexr ){

                    $(this).val("");

                }

            });

            $("input").focusout(function () {

                var placeTexr=$(this).attr("placeholder");

                var test=$(this).val();

                if($(this).attr("id") == "password" && $(this).val() == ""){

                    $(this).hide();

                    $('#showpwd').show();

                }

                if($(this).attr("type") == "text" && $(this).val() =="" ){

                    $(this).val(placeTexr);

                }

            });

        }

    })($);