ie8不兼容input的placeholder属性但是要实现其效果的方法

Posted 2020-08-23

 

通过学习前辈的思想，个人想法整理如下：

1. 通过两个元素标签，仿造出placeholder的内容
2. 使用position定位好两个元素标签
3. 第一要隐藏两个元素标签display：none,在<!--[if gte IE 8]><![endif]-->中设置style样式为display：inline-block
4. 使用js控制效果，通过给页面绑定点击事件并且利用target对象做判断，控制两个元素标签的显藏：

• 点击的对象是元素标签，当前点击对象隐藏，判断另外的输入框值是否为空，是否隐藏显示第二个元素标签
• 点击的对象时输入框，当前输入框的元素标签隐藏，判断另外的输入框值是否为空，是否隐藏显示第二个元素标签
• 点击是其他对象，判断所有输入框的值是否为空，是否显示或隐藏两个元素标签

html代码如下：

<div>
<div class="Account_img">
    <div class="ion-person-stalker"></div>
 </div>
<input id="Account" name="Account" type="text" value="" placeholder="Username账户" class="valid">
    <span class="show_placeholder" id="span1">Username账户</span>
</div>

<div>
    <div class="password_img">
        <div class="fa fa-key"></div>
    </div>
<input data-val="true" data-val-required="请填写用户密码" id="Password" name="Password" type="password" placeholder="Password密码">
    <span class="show_placeholder" id="span2">Password密码</span>
</div>

 CSS代码略

 JS代码如下：

<!--[if gte IE 8]>
<script type="text/javascript">
    $(document).click(function (e) {
        var e = e || window.event;
        var target = e.srcElement || e.target;
        if (target.id == ‘span1‘) {
            controll_input1();
            $(‘#Account‘).focus();

        } else if(target.id == ‘span2‘){
            controll_input2();
            $(‘#Password‘).focus();

        }else if(target.id=="Account"){
            controll_input1();
        }else if(target.id=="Password"){
            controll_input2();
        }else{
            if ($(‘#Account‘).val() == "") {
                $(‘#span1‘).show();
            }
            if ($(‘#Password‘).val() == "") {
                $(‘#span2‘).show();
            }
        }

    });

    function controll_input1(){
        $(‘#span1‘).hide();
        if ($(‘#Password‘).val() == "") {
            $(‘#span2‘).show();
        }
    }

    function controll_input2(){
        $(‘#span2‘).hide();
        if ($(‘#Account‘).val() == "") {
            $(‘#span1‘).show();
        }
    }

</script>
<style>
    .show_placeholder {
        display: inline-block;
    }

</style>
<![endif]-->