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,因为新版本可能已经修复了这个问题。

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

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

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

参考资源:

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

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

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

相关推荐
2501_915918417 小时前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview
感谢地心引力7 小时前
iOS26 打开开发者模式
windows·macos·ios·iphone·ios26
低调小一8 小时前
iPhone美区账号登录指南:轻松下载ChatGPT应用
ios·chatgpt·iphone
2501_916007471 天前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
2501_915909062 天前
iOS 应用上架全流程解析,苹果应用发布步骤、ipa 上传工具、TestFlight 测试与 App Store 审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
Jouzzy2 天前
【iOS安全】iPhone X iOS 16.7.11 (20H360) Palera1n MacOS版 越狱教程
macos·ios·iphone
ZFJ_张福杰2 天前
【Flutter】GetX最佳实践与避坑指南
android·flutter·ios·getx
Saniffer_SH2 天前
【高清视频】CXL 2.0 over Fibre演示和答疑 - 将内存拉到服务器10米之外
运维·服务器·网络·人工智能·驱动开发·计算机外设·硬件工程
阿蓝8582 天前
iOS代码架构
ios
非专业程序员2 天前
从0到1自定义文字排版引擎:原理篇
前端·ios