ios h5中在fixed元素中的input被focus时,键盘遮挡input (van-popup、van-feild)
问题描述:
前提:我使用的是vant组件库,其中一个页面中有一个van-popup组件,van-popup组件中又嵌套了一个van-field组件
预期结果:当点击van-feild输入框时,键盘弹起,输入框显示在键盘上方
实际结果:当van-popup打开时,首次点击van-field时,键盘将van-popup遮挡,导致输入框中内容不可见。失去焦点再次点击后,van-popup被顶起。如果关闭van-popup,则会重复前面的情况
下方视频可以看看直观效果:
键盘遮挡输入框
问题分析与尝试过程:
1. 之前遇到过类似的问题,当时是由于popup的高度导致的,修改高度就解决了 所以刚开始我也以为是高度的问题,发现调整了van-popup的高度并没有什么效果
2. 试了安卓手机发现安卓上没有问题 由此可见是ios特有
3. 查看是否是vant组件库的问题,看了github issues发现类似问题 但是issue只发生在了ios13上,我手中的ios16还是存在该问题,也用了上面提供的各个方法没有解决
4. 又看到了有人用van-popup的get-container属性解决了,挂载在body或者#app下,我尝试了以后发现测试机器8plus确实ok了,但是我手里的13pro变成偶现了
5. 焦急万分的我google一大堆,有使用scrollIntoView进行滚动的,还有监听resize手动滚动的,针对我的问题都没能解决
6. 最后看到了参考文档1中的方式,发现无论在我的手机上还是低版本的ios上都没有再出现该问题,到这里我以为是大功告成了,认为此bug已修复
以上步骤都是2024.12.10日当天经历的,下面也就是今天2024.12.12日经历的
7. 测试提了个bug,说输入框无法左右移动光标了,我十分天真地觉得这个光标是可以有原生方法设置的,不错确实有设置光标位置的,但是只是设置固定的位置,而我在6的方法中是阻止了默认行为,导致长按无法根据手指方向移动光标了,但是我依旧没死心啊,又问了各大ai,结果ai给的回答都是修改解决遮挡问题的办法,又回到了之前
8. 我让ai给我分析为什么我使用的办法会让光标无法移动,它说因为阻止了默认行为,我有说我只有第一次这样,能不能在这个方法的基础上得到解决,它终于给出了一个用的上的方式,那就是只有在首次点击的时候才阻止默认行为
9. 我回想到两天前解决的时候,发现在van-popup父组件中用v-if来控制van-popup的显示时,被遮挡的概率将会大大降低,再结合今天看了很多ios处理软件盘的流程的文档后,我找到了更简单的方法,就是在父组件中就用v-if控制van-popup显示,而van-popup中控制显示的属性将一直为true,至此我得到了两种解决方式,这一种在我自己看了最简单
解决方法:
方案一:给van-feild添加touchstart.native事件
<template><van-popupposition="bottom"class="popup"get-container="#app":value="show":overlay-style="{ background: 'rgba(0,0,0,0.5)' }":close-on-click-overlay="false"><van-field ref="fieldRef" class="field" type="email" maxlength="100" clearable v-model="email" placeholder="请输入邮箱" @touchstart.native="onInputTouch"/></van-popup>
</template><script>
import { Popup, Loading, Toast, Field } from 'vant';export default {components: {[Popup.name]: Popup,[Loading.name]: Loading,[Field.name]: Field,},props: {show: {type: Boolean,default: false}},data() {return {email: '',isFocused: false}},watch: {show: {handler(val) {if(val && this.isFocused) {this.isFocused = false;}},immediate: true}},methods: {onInputTouch(e) {if (!this.isFocused) {e.preventDefault();e.target.focus();this.isFocused = true;return;}this.isFocused = true;}}
};
</script>
方案二(最终使用):用v-if控制van-popup的显示,van-popup本身的show属性默认设置为true
参考文档:
1. van-popup 在ios手机上被键盘遮盖问题(使用该方法解决了遮挡,但是光标无法左右移动)
2. 不如刷新认识移动端软键盘出现带来的网页问题(详细介绍了ios软键盘引发问题的原因)
3. 别再用不规范的方法来解决软键盘遮挡输入框问题了
4. Keyboard Management(说明了ios webkit如何处理键盘事件和视图布局)
5. Handling the Virtual Keyboard(详细说明了ios safari中虚拟键盘的行为)
相关文章:
ios h5中在fixed元素中的input被focus时,键盘遮挡input (van-popup、van-feild)
问题描述: 前提:我使用的是vant组件库,其中一个页面中有一个van-popup组件,van-popup组件中又嵌套了一个van-field组件预期结果:当点击van-feild输入框时,键盘弹起,输入框显示在键盘上方实际结…...

springboot整合lua脚本在Redis实现商品库存扣减
1、目的 使用lua脚本,可以保证多条命令的操作原子性;同时可以减少操作IO(比如说判断redis对应数据是否小于0,小于0就重置为100,这个场景一般是取出来再判断,再存放进行,就至少存在2次IO,用lua脚…...

MySQL ON DUPLICATE KEY UPDATE影响行数
目录 分析为什么Updates返回7 总结 数据库更新日志如下 insertOrUpdateList|> Preparing: INSERT INTO clue_user_tag (vuid, tag_id, tag_type, content) VALUES (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) ON DUPLICATE KEY UPDATE …...
uniapp小程序 slot中无法传递外部参数的解决方案
最近在封装一个List组件,外部传给我数据,我循环后将每个Item部分slot到外部,由调用者自己去写item布局,类似ElementUI、iView的Tabe列表。 List: <view v-if"list.length > 0" class"list-scroll__item&quo…...

umi实现动态获取菜单权限
文章目录 前景登录组件编写登录逻辑菜单的时机动态路由页面刷新手动修改地址 前景 不同用户拥有不同的菜单权限,现在我们实现登录动态获取权限菜单。 登录组件编写 //当我们需要使用dva的dispatch函数时,除了通过connect函数包裹组件还可以使用这种方…...

Pytest-Bdd-Playwright 系列教程(14):Docstring 参数
Pytest-Bdd-Playwright 系列教程(14):Docstring 参数 前言一、什么是docstring?二、基本语法三、主要特点四、实际例子五、注意事项六、使用建议总结 前言 在自动化测试的过程中,我们经常需要处理复杂的测试数据或需要输入多行文…...

交互开发---测量工具(适用VTK或OpenGL开发的应用程序)
简介: 经常使用RadiAnt DICOM Viewer来查看DICOM数据,该软件中的测量工具比较好用,就想着仿照其交互方式自己实现下。后采用VTK开发应用程序时,经常需要开发各种各样的测量工具,如果沿用VTK的widgets的思路,…...

Qt 一个简单的QChart 绘图
Qt 一个简单的QChart 绘图 先上程序运行结果图: “sample9_1QChart.h” 文件代码如下: #pragma once#include <QtWidgets/QMainWindow> #include "ui_sample9_1QChart.h"#include <QtCharts> //必须这么设置 QT_CHARTS_USE_NAME…...

【Java笔记】LinkedList 底层结构
一、LinkedList 的全面说明 LinkedList底层实现了双向链表和双端队列特点可以添加任意元素(元素可以重复),包括null线程不安全,没有实现同步 二、LinkedList 的底层操作机制 三、LinkedList的增删改查案例 public class LinkedListCRUD { public stati…...

el-table组件树形数据修改展开箭头
<style lang"scss" scoped> ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {content: ">"; // 箭头样式font-size: 16px; }::v-deep .el-table__expand-icon{ // 没有展开的状态background-color: rgba(241, 242, 245, 1);color:…...

太速科技-FMC154-基于FMC 八路SFP+万兆光纤子卡
FMC154-基于FMC 八路SFP万兆光纤子卡 一、板卡概述 本卡是一个FPGA夹层卡(FMC)模块,可提供高达8个SFP / SFP 模块接口,直接插入千兆位级收发器(MGT)的赛灵思FPGA。支持业界标准的小型可插拔࿰…...

记:排查设备web时慢时快问题,速度提升100%
问题描述 问题1: 发现web登录界面刷新和登录功能都比较卡,开浏览器控制台看了下,让我很惊讶,居然能这么慢: 公司2个局域网内的表现不同,局域网A中的都比较卡,局域网B中的又不存在该现象。 问…...
音视频入门基础:MPEG2-TS专题(13)——FFmpeg源码中,解析Section Header的实现
一、引言 在《音视频入门基础:MPEG2-TS专题(11)—— TS中的Section》中讲述了Section Header的基本概念,本文讲述FFmpeg源码中是怎样解析Section Header的。 二、parse_section_header函数的定义 FFmpeg源码中通过parse_section…...
根据PDF模板单个PDF导出到浏览器和多个PDF打包ZIP导出到浏览器
一、单个PDF导出到浏览器 /*** * param templatePath 模板路径* param fileName 文件名称* param data 填充文本* param images 填充图片* param response* throws IOException*/public static void generateTempPDF(String templatePath, String fileName, Map<String, S…...
如何创建一个基本的Spring Boot应用程序
以下是一个简单的Spring Boot应用开发代码示例,它展示了如何创建一个基本的Spring Boot应用程序,并实现一个简单的RESTful API服务。 步骤1:创建项目 使用Spring Initializr或您喜欢的IDE(如IntelliJ IDEA或Eclipse)…...
1.2 计算机网络的分类和应用(重要知识点)
1.2.1 计算机网络的分类 计算机网络的定义: 由通信线路互相连接的、能自主工作的计算机构成,强调各计算机(工作站)拥有独立的计算资源和任务能力。与多终端分时系统不同,后者终端仅作为主机接口,不具备计…...

@JsonSerialize失效解决
当在实体类中加入这个注解时,本意是想如果是空值则返回0给页面,但是发现使用 JsonSerialize(using BigSerializer.class)无效,因为如果是null值会不走序列化的接口实现类,需要使用nullUsing 需要这样使用...

Docker部署WebRTC-Streamer
文章目录 WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题 WebRTC-Streamer概述 WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具,它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式ÿ…...
2025年的大模型计划重点在于跨领域智能、工作流自动化、多模态能力强化
明年的计划和大模型发展方向可以围绕以下几个方面展开,结合实际应用场景和技术趋势,明确可执行的目标和期待的成果: 2025 年计划与展望:大模型能做些什么? 1. 更深层次的跨领域能力融合 目标:构建更强的跨…...

day12 接口测试 ——入门→精通→实战(1)
【没有所谓的运气🍬,只有绝对的努力✊】 目录 1、接口测试分类 1.1 内部接口: 1.2 外部接口: 2、目前接口架构设计 2.1、基于SOAP架构, 2.2、基于RPC架构, 2.3、基于RestFul架构, 2.3.1…...

华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...

算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
嵌入式面试常问问题
以下内容面向嵌入式/系统方向的初学者与面试备考者,全面梳理了以下几大板块,并在每个板块末尾列出常见的面试问答思路,帮助你既能夯实基础,又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层(Link Layer) 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

python基础语法Ⅰ
python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器,来进行一些算术…...

智警杯备赛--excel模块
数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中,点击确定 这是最终结果,但是由于环境启不了,这里用的是自己的excel,真实的环境中的excel根据实训…...

河北对口计算机高考MySQL笔记(完结版)(2026高考)持续更新~~~~
MySQL 基础概念 数据(Data):文本,数字,图片,视频,音频等多种表现形式,能够被计算机存储和处理。 **数据库(Data Base—简称DB):**存储数据的仓库…...
git删除本地分支和远程分支
删除本地分支 git branch -d 分支名删除远程分支 git push origin --delete 分支名...

Redis常见使用场景解析
1. 数据库缓存 Redis 作为典型的 Key-Value 型内存数据库,数据缓存是其最广为人知的应用场景。使用 Redis 缓存数据操作简便,通常将序列化后的对象以 string 类型存储。但在实际应用中,需注意以下关键要点: Key 设计:必须确保不同对象的 Key 具有唯一性,且尽量缩短长度,…...
使用高斯朴素贝叶斯算法对鸢尾花数据集进行分类
高斯朴素贝叶斯算法通常用于特征变量是连续变量,符合高素分布的情况。 使用高斯朴素贝叶斯算法对鸢尾花数据集进行分类 """ 使用高斯贝叶斯堆鸢尾花进行分类 """ #导入需要的库 from sklearn.datasets import load_iris from skle…...