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

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

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

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

移除 readonly 属性

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

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

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

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

监听触摸事件

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

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

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

使用最新版本的 Element UI

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

其他注意事项

• 如果使用的是 Vue 3，需要注意 @hook:mounted 在 Vue 3 中已被移除，可以使用其他生命周期钩子或原生 DOM 事件替代。
• 如果项目中使用了其他 UI 框架（如 Vant），确保两者的组件没有冲突。12

通过上述方法，应该可以解决 el-select 在 iPad 上无法唤出键盘的问题。如果问题仍然存在，建议检查项目的其他配置或寻求社区的帮助。

再流量其他内容，发现有如下资料特别具有参考价值：

参考资源：

el-select 在 ipone手机上的一些问题

element-ui select可搜索下拉框无法在IOS或Ipad调起小键盘输入法

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