jQuery实现ie浏览器兼容placeholder效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery实现IE浏览器兼容placeholder效果</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    .input {
        width: 200px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border: 1px solid #ddd;
        margin: 20px auto;
        display: block;
    }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入姓名" class="input" />
    <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {

        //判断浏览器是否支持placeholder属性
        supportPlaceholder = 'placeholder' in document.createElement('input'),

            placeholder = function(input) {

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

                if (!defaultValue) {

                    input.val(text).addClass("phcolor");
                }

                input.focus(function() {

                    if (input.val() == text) {

                        $(this).val("");
                    }
                });


                input.blur(function() {

                    if (input.val() == "") {

                        $(this).val(text).addClass("phcolor");
                    }
                });

                //输入的字符不为灰色
                input.keydown(function() {

                    $(this).removeClass("phcolor");
                });
            };

        //当浏览器不支持placeholder属性时，调用placeholder函数
        if (!supportPlaceholder) {

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

                text = $(this).attr("placeholder");

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

                    placeholder($(this));
                }
            });
        }

    });
    </script>
</body>

</html>
效果图：