出现的问题及原因

前两天，在工作的过程中发现有个网页在低版本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表单

    
        
            
             登入
            
                
                
            
            
                登录 
            
            
                
                    忘记密码?
                
                
                    还没有平台账号？点击注册»

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
}

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