el-select filterable模糊搜索在iOS手机上无法弹出软键盘,解决方案

前提:

        el-select filterable模糊搜索在iOS手机上无法弹出软键盘,在手机上使用时,iOS手机,该组件无法唤起软键盘,导致没法进行模糊搜素。

        于是。开始去找原因,发现主要是因为 组件中,input上有一个readonly 属性,而该属性规定输入字段为只读。阻止了用户对值进行修改,直到满足某些条件才行。

 

 其在微信开发者工具上是可以模糊搜索,在手机上没法弹出软键盘搜素。

ios手机 h5没法搜素 

 

 想达到预期效果,效果图

想达到预期效果:可以进行模糊搜素 

 

解决方法 

main.js中
import ElementUi from 'element-ui';ElementUi.Select.computed.readonly = function () {
const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));
return !(this.filterable || this.multiple || !isIE) && !this.visible;
};Vue.use(ElementUI)

 页面中

      <div class="from-wrap"><div class="from-title">车牌号</div><div class="from-box"><el-select v-model="dataForm.vehicle_number" clearable filterable placeholder="请选择" style="width: 100%;"ref="selectCar"@focus="clearCar"@hook:mounted="clearCar"@visible-change="clearCar" :clearable="showCloseCar"@change="changeCar"><el-optionv-for="(item,index) in carLists":key="index":label="item.name":value="item.vehicle_number"></el-option></el-select></div></div>

 clearable 清空问题

// 增加一个 showClose,用来控制 clearable 显示隐藏。<template><el-selectref="select"@focus="clear":clearable="showClose"@hook:mounted="clear"@visible-change="clear"@blur.native.capture="onblur"></el-select>
</template>
<script>export default {data(){return{showfalse:false,}},methods: {clear(async) {if (async) { // 打开下拉框 显示可清空按钮this.showClose = true}this.$nextTick(() => {if (!async) {// ios 手机有延迟问题setTimeout(() => {const { select } = this.$refsconst input = select.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}, 200)}})},// 失去焦点时,需要把软键盘收起onblur() {setTimeout(() => {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOSthis.$refs.select.blur();}this.showClose = false}}}
</script>

 

完整代码 

data: {showCloseCar: false,
},methods: {
//clearable 清空问题
//如果el-select 还增加了clearable清空功能,会发现当你点击选中时,首先会出现清空按钮,二次点击才能弹出软键盘。
//增加一个 showClose,用来控制 clearable 显示隐藏。clearCar(async) {if (async) { // 打开下拉框 显示可清空按钮this.showCloseCar = true}this.$nextTick(() => {if (!async) {// ios 手机有延迟问题setTimeout(() => {const { selectCar } = this.$refsconst input = selectCar.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}, 200)}})},// 失去焦点时,需要把软键盘收起onblurCar() {setTimeout(() => {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOSthis.$refs.selectCar.blur();}this.showCloseCar = false},100)},clearDriver(async) {if (async) { // 打开下拉框 显示可清空按钮this.showCloseDriver = true}this.$nextTick(() => {if (!async) {// ios 手机有延迟问题setTimeout(() => {const { selectDriver } = this.$refsconst input = selectDriver.$el.querySelector('.el-input__inner')input.removeAttribute('readonly')}, 200)}})},changeCar(val) {console.log(val,'changeCar')this.$forceUpdate();},
}
二次点击问题

el-select下拉选项在ios上,需要点击2次才能选中(通过css解决,需确保css样式全局作用域)

// App.vue
<style lang="scss">// to fix 在ios设备中,el-select组件下拉框,点击2次才能选中问题。.el-scrollbar .el-scrollbar__bar {opacity: 1 !important;}
</style

 效果图:

完结,撒花~

🍓结束语🏆

       🍉 还有一些不如的地方大家可以指正,欢迎评论留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker-compose jira、bugzilla、zentao

参见文章&#xff0c;这里是对之前的内容进行了改动&#xff0c;主要讲怎么将zentao容器融入到已有的docker-compose.yml中 一、zentao镜像 从官网上拉取&#xff1a;https://hub.docker.com/r/easysoft/zentao/tags 可以选择自己想要的版本&#xff0c;这里我选择的是开源版…

地学类期刊最新CiteScore™ 汇总

地球与行星科学 前1000个 来源出版物名称 (地学之家整理&#xff09;CiteScoreNature Reviews Earth and Environment52.9Reviews of Geophysics50.3Astronomy and Astrophysics Review45Living Reviews in Solar Physics41.9Annual Review of Marine Science33.6Nature…

分布式系统如何做到海量数据边云协同?看 TDengine 油气领域解决方案

在某大型油田生产管理方案中&#xff0c;用户需要实现生产现场的自动化采集与控制、生产视频系统、工业物联网、生产数据服务、智能化生产管控应用以及各个环节的信息化采集标准建设等内容。在 TDengine 的帮助下&#xff0c;该大型项目成功完成了技术优化升级。本篇文章将就本…

椭圆曲线加密算法中公钥与私钥互换性分析

PrimiHub一款由密码学专家团队打造的开源隐私计算平台&#xff0c;专注于分享数据安全、密码学、联邦学习、同态加密等隐私计算领域的技术和内容。 在现代密码学中&#xff0c;椭圆曲线加密算法&#xff08;Elliptic Curve Cryptography, ECC&#xff09;因其高效的加密速度、较…

如何通过墙面互动投影打造全新娱乐体验?

随着展厅设计技术的飞速发展&#xff0c;我们见证了无数令人惊叹的创意墙面互动设计形式的涌现。其中&#xff0c;墙面互动投影凭借其独特的魅力&#xff0c;成为了备受欢迎的创意墙面设计典范。它巧妙地融合了展示内容与互动体验&#xff0c;彻底革新了观众与数字内容的交流方…

通过向量叉乘计算姿态充电桩朝向

通过向量叉乘计算姿态充电桩朝向 需求&#xff1a; 通过geometry_msgs::PointStamped intersection_ros_line1; geometry_msgs::PointStamped intersection_ros_line2&#xff1b;geometry_msgs::PointStamped intersection_ros_point;其中 intersection_ros_line1与intersec…

【编程语言】Python平台化为何比Java差?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

代码随想录算法训练营day59 | 115.不同的子序列、583. 两个字符串的删除操作、72. 编辑距离

115.不同的子序列 1、确定dp数组以及下标的含义 dp[i][j]&#xff1a;以i-1为结尾的s子序列中出现以j-1为结尾的t的个数为dp[i][j] 2、确定递推公式 这一类问题&#xff0c;基本是要分析两种情况 s[i - 1] 与 t[j - 1]相等s[i - 1] 与 t[j - 1] 不相等 &#xff08;1&…

ROS 机器人运动控制(C++实现)

ROS 机器人运动控制&#xff08;C实现&#xff09; 实现思路 构建一个新的软件包&#xff0c;报名叫做vel_pkg在软件包中新建一个节点&#xff0c;节点名叫做vel_node在节点中&#xff0c;向ROS大管家NodeHandle申请发布话题/cmd_vel&#xff0c;并拿到发布对象vel_pub构建一…

C语言学习系列:初识C语言

前言&#xff0c;C语言是什么 语言&#xff0c;比如中文、英语、法语、德语等&#xff0c;是人与人交流的工具。 C语言也是语言&#xff0c;不过是一种特殊的语言&#xff0c;是人与计算机交流的工具。 为什么叫C语言呢&#xff1f; 这就要从C语言的历史说起了。 一&#…

【电脑小白】装机从认识电脑部件开始

前言 在 B 站上刷到了一个很牛逼的电脑装机视频&#xff0c;很适合电脑小白学习&#xff0c;故用文本记录下。 推荐对组装台式电脑有兴趣的小伙伴都去看看这个视频&#xff1a; 原视频链接&#xff1a;【装机教程】全网最好的装机教程&#xff0c;没有之一_哔哩哔哩_bilibil…

Transformer模型:未来的改进方向与潜在影响

Transformer模型&#xff1a;未来的改进方向与潜在影响 自从2017年Google的研究者们首次提出Transformer模型以来&#xff0c;它已经彻底改变了自然语言处理&#xff08;NLP&#xff09;领域的面貌。Transformer的核心优势在于其“自注意力&#xff08;Self-Attention&#xf…

做好程序前设计

不要小看任何一道编程题目&#xff01;一定一定一定要想好之后再动手&#xff01;&#xff01;&#xff01; 带上你的草稿本&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xf…

Java 循环结构

Java 循环结构 Java 循环结构是编程语言中的一种基本控制结构,它允许我们重复执行一段代码多次。在 Java 中,主要有四种类型的循环结构:for 循环、while 循环、do-while 循环和增强 for 循环。每种循环结构都有其特定的用途和语法。 1. for 循环 for 循环是 Java 中最常用…

Vite使用unplugin-auto-import实现vue3中的自动导入

unplugin-auto-import 是基于 unplugin 写的&#xff0c;支持 Vite、Webpack、Rollup、esbuild 多个打包工具。我们可以使用unplugin-auto-import实现依赖的自动导入&#xff0c;不用再频繁导入依赖包&#xff0c;从而提交我们的开发效率。如下&#xff0c;以vue3vite中使用改插…

Linux系统之Ward服务器监控工具

Linux系统之Ward服务器监控工具 文章目录 Linux系统之Ward服务器监控工具介绍资源列表基础环境一、安装Java环境二、下载ward的jar包2.2、下载软件包 三、安装ward工具3.1、启动ward服务3.2、查看你后台启动任务3.3、监听ward服务端口 四、访问ward服务4.1、进入ward初始界面4.…

Ubuntu20.04.6操作系统安装教程

一、VMware Workstation16安装 选择安装VMware Workstation&#xff0c;登录其官网下载安装包&#xff0c;链接如下&#xff1a; 下载 VMware Workstation Pro 下载后运行安装向导&#xff0c;一直Next即可。 二、Ubuntu镜像下载 ubuntu20.04 选择需要下载的镜像类型下载即…

猜测Tomcat如何实现WebSocket协议

一、WebSocket协议的实现 (一)WebSocket是官方的协议接口标准。 (二)如果一门编程语言可以网络连接和并发&#xff0c;就能创建一种WebSocket实现。 (三)同一种编程语言&#xff0c;有不同的协议实现版本和框架。 二、Tomcat实现 在Tomcat容器中实现了对应的WebSocket版本&am…

keras 和 tensorflow主要组件

Keras 是一个高级神经网络 API&#xff0c;其主要组件包括&#xff1a; 1. 层&#xff08;Layers&#xff09; 1. 全连接层&#xff08;Dense Layer&#xff09; 全连接层&#xff08;也称为密集层&#xff09;是最常用的一种层&#xff0c;它对输入和输出的每一个神经元都进…

采集罗克韦尔AB、西门子等PLC数据发布成HTTP接口

智能网关IGT-DSER集成了多种PLC的原厂协议&#xff0c;方便实现各种PLC的原厂协议转换为HTTP协议的服务端&#xff0c;通过网关的参数配置软件绑定JSON文件的字段与PLC寄存器地址&#xff0c;即可接收来自客户端的GET、PUT和POST命令&#xff0c;解析和打包JSON文件(JSON文件格…