el-select 可搜索下拉框在ios、ipad 无法唤出键盘，造成无法输入

下一篇：el-select 可搜索下拉框，选中选项后，希望立即失去焦点，收起键盘，执行其他逻辑

【效果图】：分组展示选项 =>【去界面操作体验】

首先，通过夸克浏览器的搜索: el-select 在 ipad 输入框，无法唤出键盘，因而无法输入.获得了解决方案，照方抓药，愈。过程记录：

在 iPad 上使用 Element UI 的 el-select 组件时，如果输入框无法唤出键盘，通常是由于组件内部的 readonly 属性导致的。以下是一些可能的解决方案：

移除 readonly 属性

Element UI 的 `el-select` 组件在 iOS 设备上无法唤起软键盘的问题，通常是因为组件内部的输入框被设置了 `readonly` 属性。可以通过以下方法移除该属性：123

在 el-select 组件上添加 ref，然后在 mounted 钩子函数中移除 readonly 属性。12

html 复制代码

<el-select ref="select" @hook:mounted="removeReadOnly" @visible-change="removeReadOnly">     
    <!-- options --> 
</el-select>

javascript 复制代码

removeReadOnly() { 
    this.$nextTick(() => { 
        const input = this.$refs.select.$el.querySelector('.el-input__inner');                     
        input.removeAttribute('readonly'); 
    }); 
}

监听触摸事件

在移动端，可以通过监听触摸事件来解决无法唤起键盘的问题。在组件的 mounted 钩子中添加触摸事件监听器，当检测到 el-select 被点击时，移除 readonly 属性。

javascript 复制代码

mounted() { 
    if (this.isMobile) { 
        window.addEventListener('touchstart', this.handleTouch); 
    } 
}, 

beforeDestroy() { 
    if (this.isMobile) { 
        window.removeEventListener('touchstart', this.handleTouch); 
    } 
}, 

methods: { 
    handleTouch(e) { 
        if (e.target.className.includes('el-select') || e.target.className.includes('el-input__inner')) { 
            const input = document.querySelector('.el-input__inner'); input.removeAttribute('readonly'); 
        } 
    } 
}

全局处理

如果项目中多处使用 `el-select` 组件，可以考虑在全局范围内处理 `readonly` 属性。在项目的入口文件（如 main.js）中添加以下代码：1

javascript 复制代码

Array.from(
    document.querySelectorAll('.el-select')).forEach((item) => 
    { 
        item.querySelector('.el-input__inner').removeAttribute('readonly'); 
    }
);

使用最新版本的 Element UI

确保使用的是最新版本的 Element UI，因为新版本可能已经修复了这个问题。