el-select 在iOS手机上，无法唤起软键盘

最新推荐文章于 2024-07-08 15:33:44 发布

原创最新推荐文章于 2024-07-08 15:33:44 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

vue 同时被 3 个专栏收录

18 篇文章

订阅专栏

ElementUI

12 篇文章

订阅专栏

移动端

9 篇文章

订阅专栏

文章讲述了在使用ElementUI的el-select组件并开启filterable属性后，在iOS设备上无法弹出键盘进行搜索的问题。原因是input元素上的readonly属性。解决方案是通过focus、hook:mounted和visible-change事件来清除input的readonly属性，确保在iOS上可以正常使用搜索功能。

问题描述

提示：这里描述项目中遇到的问题：

el-select添加 filterable 属性，支持搜索，在 ios 手机上无法唤起软件盘进行搜索

原因分析：

提示：这里填写问题的分析：

主要是因为 el-select 组件中， input 上有一个 readonly 属性，而该属性规定输入字段为只读。

解决方案：

提示：这里填写该问题的具体解决方案：
通过 focus 、 hook:mounted 、visible-change 删除 readonly 属性

// 本案例只为处理兼容问题，不包含其他复杂逻辑
<template>
    <el-select
        filterable 
        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>