问题
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清空功能，会发现当你点击选中时，首先会出现清空按钮，二次点击才能弹出软键盘。文章来源：https://www.toymoban.com/news/detail-502685.html
// 我们增加一个 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文章来源地址https://www.toymoban.com/news/detail-502685.html
mounted () {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
this.showClose = false
}
}
到了这里，关于el-select 在iOS手机上，无法唤起软键盘以及二次点击问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![el-select报错：vue.esm.js?5cd5:5105 [Vue warn]: ＜transition-group＞ children must be keyed: ＜ElTag＞；无法选中](https://imgs.yssmx.com/Uploads/2024/02/622788-1.png)
