问题描述:
在ios移动端使用elmentUI后无法弹出软键盘
<el-select v-model="form.value" filterable @change = "changeStore">
<el-option
v-for="item in form.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
原因:
上面这段代码,变成组件的时候是这样的
猜测可能是因为 input有readonly属性,所以不会弹出软键盘,所以尝试去除readonly属性,代码如下:
document.getElementById('**').removeAttribute('readOnly')
但是这个组件在blur的时候又把readonly加回去了,因此在blur的时候还要把readonly属性去掉,查看select组件的源码后发现blur的时候有50毫秒的延迟用户体验优化,因此去除操作也得是个异步操作,才能消除readonly,源码如下:
handleBlur:function(e){
var t=this;
setTimeout(function(){
t.isSilentBlur?t.isSilentBlur=!1:t.$emit("blur",e)},50),this.softFocus=!1
})
解决方案
公共文件夹里写上这段代码即可:
Array.from(document.getElementsByClassName('el-select')).forEach((item) => {
item.children[0].children[0].removeAttribute('readOnly')
item.children[0].children[0].onblur = function () {
let _this = this
setTimeout(() => {
_this.removeAttribute('readOnly')
}, 200)
}
})