【问题合集】vue解决IE9及以下不支持placeholder属性的问题

出现的问题及原因

前两天，在工作的过程中发现有个网页在低版本ie下会出现placeholder属性失效的问题。导致有些页面/表单，用户不知道对应位置该填写什么内容。
本来是打算在页面加载的时候，通过获取 input 的 placeholder 属性赋值给对应的input value。但是因为页面用的vue.js，在input输入框里有v-model绑定数据，导致页面渲染的时候，先出现一下 placeholder提示，value又立马被 v-model 绑定的空数据 给覆盖，还是不能完美解决。

解决方法

通过vue的自定义全局指令 Vue.directive 来控制。

在Vue中，自定义指令的生命周期，有5个事件钩子：1-bind 被绑定，  2-inserted 被插入， 3-update 开始更新， 4-componentUpdated 更新完成，5-unbind 解除绑定。

像这次，我们可以设置在 insert、update、unbind 这三个事件发生时，设置placeholder对应的展示状态。

html表单

    <div class="pop-box">
        <div class="pop form">
            <a class="pop-close" href="javascript:void(0)" title=""></a>
            <h3> 登入</h3>
            <ul>
                <li><input type="text" v-support placeholder="手机号码" v-model="user.mobile"/></li>
                <li><input type="password" v-support placeholder="密码" v-model="user.password"></li>
            </ul>
            <div class="btn">
                <a class="" href="javascript:void(0)" title="" @click="login()">登录 <i class="arrow-right"></i></a>
            </div>
            <div class="tip">
                <p class="l">
                    <a class="" href="javascript:void(0)" title="忘记密码?" @click="forgotPanel">忘记密码?</a>
                </p>
                <p class="r">
                    还没有平台账号？<a class="" href="javascript:void(0)" title="" @click="registerPanel">点击注册»</a>
                </p>
            </div>
        </div>
    </div>

vue 自定义support指令

var vue = new Vue({
    el: "#app",
    data: {
        
    },
    directives: {
        support: {
            inserted: function (el, binding, vnode) {
                if (("placeholder" in document.createElement("input"))) {
                    return;
                }
                if (/^el/.test(el.className)) {
                    el = el.querySelector("[placeholder]");
                }
                var placeholder = el.getAttribute("placeholder") || "请输入";
                var span = document.createElement("span");
                span.className = "ie-placeholder";
                span.innerText = placeholder;
                span.style.left = "10px";
                el.parentNode.style.position = "relative";
                el.insertAdjacentElement("afterend", span);
                el.onfocus = function (event) {
                    if (event.target.value) {
                        span.style.display = "none";
                    }
                };
                el.onblur = function (event) {
                    if (!event.target.value) {
                        span.style.display = "inline";
                    }
                };
                el.oninput = function (event) {
                    if (event.target.value) {
                        span.style.display = "none";
                    } else {
                        span.style.display = "inline";
                    }
                }
            },
            update: function (el) {
                if (el.value) {
                    var sibs = el.parentNode.children;
                    for (var i = 0; i < sibs.length; i++) {
                        if (sibs[i].className === 'ie-placeholder') {
                            sibs[i].style.display = "none";
                        }
                    }
                }
            },
            unbind: function (el) {
                el.onfocus = el.onblur = el.oninput = null;
            }
        }
    },
});

对应ie-placeholder的css样式

.ie-placeholder {
    position: absolute;
    font-size: 14px;
    color: #9c9c9c;
    pointer-events: none
}

解决后的效果及对应html代码