1、场景复现：最近在做一个图谱项目，涉及到需要将pc端代码在移动端采用H5方式展示，需要进行适配，适配操作完成后，在移动端ios点击下拉框el-select，focus后不能唤起软键盘以至于不能进行远程搜索。
2、问题原因： 通过寻找发现是因为el-select本身带有readonly属性，去除该属性可解决该问题，但随后又发现还是无法唤起键盘，最后排查发现在ios端，element事件focus/blur触发不了导致的。
3、解决问题：采用移动端的触摸事件实现：
touchstart：手指放在一个DOM元素上。
touchmove：手指拖曳一个DOM元素。
touchend：手指从一个DOM元素上移开。
通过监听touchstart事件，判断是否是el-select触发的，一旦确定点击了el-select，则去除readonly属性。
created() {
this.isMobile = navigator.userAgent.match('Mobile|iPhone|Android')
},
mounted() {
if (this.isMobile) {
window.addEventListener('touchstart', this.handleTouch)
}
},
beforeDestroy() {
if (this.isMobile) {
window.removeEventListener('touchstart', this.handleTouch)
}
},
methods: {
handleTouch(e) {
let input_dom = document.querySelector('.el-input__inner')
let popper_dom = document.querySelector('.el-select-dropdown')
let select_dom = document.querySelector('.el-select')
//点击输入框唤起键盘
if (
e.target.className.includes('el-select') ||
e.target.className.includes('el-input') ||
e.target.className.includes('el-input__inner')
) {
input_dom.removeAttribute('readonly')
//解决下拉框宽度变小问题
popper_dom.setAttribute(
'style',
'min-width:' + select_dom.offsetWidth + 'px;' + 'border:none;'
)
} else {
//解决点击除输入框的其他位置不会关闭下拉框
popper_dom.setAttribute('style', 'display:none;')
// input_dom.blur()
// document.activeElement.blur()
}
}
}
