IE8下对type=checkbox类型的input的placeholder属性的仿写

2019独角兽企业重金招聘Python工程师标准>>>

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>

 

转载于:https://my.oschina.net/u/2335552/blog/511358