IE8下對type=checkbox類型的input的placeholder屬性的仿寫

placeholder屬性是HTML5 中爲input添加的。在input上提供一個佔位符，文字形式展現輸入字段預期值的提示信息（hint），該字段會在輸入爲空時顯示。

如

    <input type="text" id="userName" placeholder="
用戶名"/>
    <input type = "password" id="passWord" placeholder="密碼"/>

目前瀏覽器的支持狀況

瀏覽器	IE6/7/8/9	IE10+	Firefox	Chrome	Safari
是否支持	NO	YES	YES	YES	YES

 

然而，雖然IE10+支持placeholder屬性，它的表現與其它瀏覽器也不一致

• IE10+裏鼠標點擊時（獲取焦點）placeholder文本消失

• Firefox/Chrome/Safari點擊不消失，而是鍵盤輸入時文本消失

咱們但願ＩＥ低版本下實現ＩＥ１０＋　placeholder的效果，能夠經過如下方法:

首先css 的樣式以下：

    <style type="text/css">

        input[type="text"]

        {

            display:block;

            margin:0 auto;

            width: 230px;

            text-align: center;

        }

        #userName

        {

            margin-top: 31px;

            border: none;

            color: #616060;

            border-bottom: 1px solid #949799;

        }

        #passWord

        {

            display: block;

            margin: 0 auto;

            width: 230px;

            text-align: center;

            font-size: 11px;

            color: #616060;

            border: none;

            border-bottom: 1px solid #949799;

            cursor: pointer;

            padding: 0 0 1px 1px;

            margin-top: 25px;

        }

        #placeholder

        {

            display: block;

            margin: 0 auto;

            width: 230px;

            text-align: center;

            font-size: 11px;

            color: #616060;

            border: none;

            border-bottom: 1px solid #949799;

            cursor: pointer;

            padding: 0 0 1px 1px;

            margin-top: -16px;

            position:relative;

        }

        #placeholder:focus,#placeholder:hover

        {

            color: #1e94da;

            border-color:#1e94da;

        }

        #passWord:focus,#passWord:hover{color: #1e94da;border-color:#1e94da;}

    </style>

對於不涉及轉換input的type的仿寫比較簡單，代碼以下：

       $().ready(function(){

            $("#passWord").after("<input type = 'text' value='
密碼' id='placeholder'>");

            if($("#userName").val()=="")

            {

                $("#userName").val("用戶名");

            }

            $("#userName").focus(function(){

                if($(this).val()=="用戶名")

                {

                    $(this).val("");

                }

            });

         });

對於密碼框的placeholder的仿寫，因爲ＩＥ８下並不支持input類型type的轉換，所以我選擇使用兩個不一樣類型密碼框疊加的方法實現該效果，具體代碼以下：

$().ready(function(){

            //
添加密碼提示框

            $("#passWord").after("<input type = 'text' value='密碼' id='placeholder'>");

            //對密碼框的仿寫

            $("#placeholder").focus(function(){

                 $(this).val("");

                 $(this).css("z-index","-1");

                $("#passWord").focus();

            });

            $("#passWord").blur(function(){

                if($(this).val()=="")

                {

                    $("#placeholder").val("密碼");

                    $("#placeholder").css("z-index","1");

                }

            });

        });

效果以下：

                       圖1

點擊事後輸入密碼：

                       圖2

看上去彷佛沒什麼問題，然而若是密碼框中有默認值，則仍會顯示密碼的提示效果（圖1），只有點擊事後纔會出現如圖2的效果，所以咱們須要在添加數據後，觸發一次focus事件和blur事件：

以下：

            $("#userName").val("hello");
            $("#passWord").val("888888");
            $("#placeholder").focus();
            setTimeout("$('#passWord').blur();",1);

這裏使用setTimeout()爲blur（）添加延時效果，是在IE8中測試過的效果，不知道什麼緣由，這樣寫

            $("#placeholder").focus();

            $('#passWord').blur();

在IE8中blur（）事件並不能觸發，添加了延時後，即能正常實現了

完整的js代碼以下：

    <script type="text/javascript">

        $().ready(function(){

            $("#passWord").after("<input type = 'text' value='
密碼' id='placeholder'>");

            if($("#userName").val()=="")

            {

                $("#userName").val("帳號");

            }

            $("#userName").focus(function(){

                if($(this).val()=="帳號")

                {

                    $(this).val("");

                }

            });

            $("#userName").blur(function(){

                if($(this).val()=="")

                {

                    $(this).val("帳號");

                }

            });

            $("#placeholder").focus(function(){

                 $(this).val("");

                 $(this).css("z-index","-1");

                $("#passWord").focus();

            });

            $("#passWord").blur(function(){

                if($(this).val()=="")

                {

                    $("#placeholder").val("密碼");

                    $("#placeholder").css("z-index","1");

                }

            });

            $("#userName").val("chen");

            $("#passWord").val("888888");

            $("#placeholder").focus();

            setTimeout("$('#passWord').blur();",1);

        });

    </script>