当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 20:56:42 vue.js

问题及原因前两天在工作过程中,发现网页的placeholder属性有问题在较低版本的ie下会失败。结果,在某些页面/表格上,用户不知道在相应的位置填写什么。本来打算在页面加载的时候通过获取input的placeholder属性来赋值对应的input值。但是因为页面使用了vue.js,所以input输入框里面有v-model绑定数据。页面渲染时,首先出现占位符提示,该值立即被v-model绑定的空数据覆盖。无法完美解决。该解决方案由Vue的自定义全局指令Vue.directive控制。在Vue中,自定义指令的生命周期有5个事件钩子:1-bind绑定,2-inserted插入,3-update开始更新,4-componentUpdated更新完成,5-unbind解除绑定。像这次我们可以设置当insert、update、unbind这三个事件发生时placeholder对应的显示状态。html表单

登录

登录
忘记密码?

还没有平台账户?点击注册?

vue自定义支持指令varvue=newVue({el:"#app",data:{},directives:{support:{inserted:function(el,binding,vnode){if(("placeholder"indocument.createElement("input"))){return;}if(/^el/.test(el.className)){el=el.querySelector("[placeholder]");}varplaceholder=el.getAttribute("placeholder")||"请输入";varspan=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";}}},更新:function(el){if(el.value){varsibs=el.parentNode.children;对于(vari=0;i