青岛市建设工程合肥优化营商环境
【效果图】：分组展示选项 =>【去界面操作体验】
首先，通过 夸克浏览器的搜索: 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 可搜索下拉框，选中选项后，希望立即失去焦点，收起键盘，执行其他逻辑