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

news/2025/3/31 15:30:55/

下一篇: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
<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 可搜索下拉框,选中选项后,希望立即失去焦点,收起键盘,执行其他逻辑


http://www.ppmy.cn/news/1583725.html

相关文章

Docker镜像相关命令(Day2)

文章目录 前言一、问题描述二、相关命令1.查看镜像2.搜索镜像3.拉取镜像4.删除镜像5.镜像的详细信息6.标记镜像 三、验证与总结 前言 Docker 是一个开源的容器化平台&#xff0c;它让开发者能够将应用及其依赖打包到一个标准化的单元&#xff08;容器&#xff09;中运行。在 D…

前端初级面试20道核心题+详细思路解析

一、HTML/CSS 基础篇 ​1. 如何让一个 div 水平居中&#xff1f;至少写出 3 种方法 答题思路&#xff1a; ​方法1&#xff1a;margin: 0 auto; 设置宽度&#xff08;块级元素&#xff09;。​方法2&#xff1a;父级 text-align: center;&#xff0c;子级 display: inline-…

ArkUI之常见基本布局(下)

6.轮播(Swiper) 1.概述 Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件&#xff0c;当设置了多个子组件后&#xff0c;可以对这些子组件进行轮播显示。通常&#xff0c;在一些应用首页显示推荐的内容时&#xff0c;需要用到轮播显示的能力。 针对复杂页面场景…

Modbus协议编程读写流程图大全

读离散量输入 读保持寄存器 读输入寄存器 写单个线圈 写单个寄存器 写多个线圈 写多个寄存器 (0x14) 读文件记录 写文件记录 (0x16) 屏蔽写寄存器 (0x17) 读/写多个寄存器

c++图论(六)之字典序最小欧拉路

要找到字典序最小的欧拉路径,可以采用以下步骤: 确定是否存在欧拉路径: 对于无向图,检查所有顶点的度数。若存在0个奇数度数的顶点,则为欧拉回路;若存在2个奇数度数的顶点,则为欧拉路径,否则不存在。选择起点: 若存在两个奇数度数顶点,选择编号较小的作为起点。若为欧…

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码+登录界面】

目录 一、界面全貌展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;摄像头检测 …

UI前端与数字孪生:打造智慧城市的双引擎

hello宝子们...我们是艾斯视觉擅长ui设计和前端数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 随着信息技术的飞速发展&#xff0c;智慧城市的概念逐渐从理论走向实践。智慧城市旨在通过运用物联网…

使用 Chromedp 监听网页请求和响应

使用 Chromedp 监听网页请求和响应 在进行网络爬虫的时候&#xff0c;有很多网站都有反爬机制&#xff0c;比如你想抓点数据&#xff0c;结果发现每次请求都带一堆奇奇怪怪的参数 —— 什么 timestamp 签名、AES 加密的字段&#xff0c;还有各种 Token 令牌&#xff0c;跟密码…