问题
element UI 中有一个el-select组件。我们经常用它来实现下拉框功能。 但是在手机上使用时,发现iOS手机上,该组件无法唤起软键盘。
主要是因为 组件中,input上有一个readonly 属性,而该属性规定输入字段为只读。阻止了用户对值进行修改,直到满足某些条件才行。
方案
// 本案例只为处理兼容问题,不包含其他复杂逻辑
<template>
<el-select
ref="select"
@focus="clear"
@hook:mounted="clear"
@visible-change="clear"
>
</el-select>
</template>
<script>
export default {
methods: {
clear(async) {
this.$nextTick(() => {
if (!async) {
// ios 手机有延迟问题
setTimeout(() => {
const {
select } = this.$refs
const input = select.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}, 200)
}
})
}
}
}
</script>
二次点击问题
el-select下拉选项在ios上,需要点击2次才能选中(通过css解决,需确保css样式全局作用域)
// App.vue
<style lang="scss">
// to fix 在ios设备中,el-select组件下拉框,点击2次才能选中问题。
.el-scrollbar .el-scrollbar__bar {
opacity: 1 !important;
}
</style
完成以上操作就可以正常使用了。
clearable 清空问题
如果el-select 还增加了clearable清空功能,会发现当你点击选中时,首先会出现清空按钮,二次点击才能弹出软键盘。
// 我们增加一个 showClose,用来控制 clearable 显示隐藏。
<template>
<el-select
ref="select"
@focus="clear"
:clearable="showClose"
@hook:mounted="clear"
@visible-change="clear"
@blur.native.capture="onblur"
>
</el-select>
</template>
<script>
export default {
data(){
return{
showfalse:false,
}
},
methods: {
clear(onOff) {
if (onOff) {
// 打开下拉框 显示可清空按钮
this.showClose = true
}
this.$nextTick(() => {
if (!async) {
// ios 手机有延迟问题
setTimeout(() => {
const {
select } = this.$refs
const input = select.$el.querySelector('.el-input__inner')
input.removeAttribute('readonly')
}, 200)
}
})
},
// 失去焦点时,需要把软键盘收起
onblur() {
setTimeout(() => {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//判断iPhone|iPad|iPod|iOS
this.$refs.select.blur();
}
this.showClose = false
}
}
}
</script>
这种办法
其实我个人觉得,在移动端也不太需要clearable功能,因此我做了一个判断。在移动端的情况下,clearable 值设为 false
mounted () {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// 判断iPhone|iPad|iPod|iOS
this.showClose = false
}
}