当前位置: 首页 > news >正文

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)

问题描述&#xff1a; 前提&#xff1a;我使用的是vant组件库&#xff0c;其中一个页面中有一个van-popup组件&#xff0c;van-popup组件中又嵌套了一个van-field组件预期结果&#xff1a;当点击van-feild输入框时&#xff0c;键盘弹起&#xff0c;输入框显示在键盘上方实际结…...

springboot整合lua脚本在Redis实现商品库存扣减

1、目的 使用lua脚本&#xff0c;可以保证多条命令的操作原子性&#xff1b;同时可以减少操作IO&#xff08;比如说判断redis对应数据是否小于0&#xff0c;小于0就重置为100&#xff0c;这个场景一般是取出来再判断&#xff0c;再存放进行&#xff0c;就至少存在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组件&#xff0c;外部传给我数据&#xff0c;我循环后将每个Item部分slot到外部&#xff0c;由调用者自己去写item布局&#xff0c;类似ElementUI、iView的Tabe列表。 List: <view v-if"list.length > 0" class"list-scroll__item&quo…...

umi实现动态获取菜单权限

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

Pytest-Bdd-Playwright 系列教程(14):Docstring 参数

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

交互开发---测量工具(适用VTK或OpenGL开发的应用程序)

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

Qt 一个简单的QChart 绘图

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

【Java笔记】LinkedList 底层结构

一、LinkedList 的全面说明 LinkedList底层实现了双向链表和双端队列特点可以添加任意元素(元素可以重复)&#xff0c;包括null线程不安全&#xff0c;没有实现同步 二、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夹层卡&#xff08;FMC&#xff09;模块&#xff0c;可提供高达8个SFP / SFP 模块接口&#xff0c;直接插入千兆位级收发器&#xff08;MGT&#xff09;的赛灵思FPGA。支持业界标准的小型可插拔&#xff0…...

记:排查设备web时慢时快问题,速度提升100%

问题描述 问题1&#xff1a; 发现web登录界面刷新和登录功能都比较卡&#xff0c;开浏览器控制台看了下&#xff0c;让我很惊讶&#xff0c;居然能这么慢&#xff1a; 公司2个局域网内的表现不同&#xff0c;局域网A中的都比较卡&#xff0c;局域网B中的又不存在该现象。 问…...

音视频入门基础:MPEG2-TS专题(13)——FFmpeg源码中,解析Section Header的实现

一、引言 在《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;11&#xff09;—— TS中的Section》中讲述了Section Header的基本概念&#xff0c;本文讲述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应用开发代码示例&#xff0c;它展示了如何创建一个基本的Spring Boot应用程序&#xff0c;并实现一个简单的RESTful API服务。 步骤1&#xff1a;创建项目 使用Spring Initializr或您喜欢的IDE&#xff08;如IntelliJ IDEA或Eclipse&#xff09;…...

1.2 计算机网络的分类和应用(重要知识点)

1.2.1 计算机网络的分类 计算机网络的定义&#xff1a; 由通信线路互相连接的、能自主工作的计算机构成&#xff0c;强调各计算机&#xff08;工作站&#xff09;拥有独立的计算资源和任务能力。与多终端分时系统不同&#xff0c;后者终端仅作为主机接口&#xff0c;不具备计…...

@JsonSerialize失效解决

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

Docker部署WebRTC-Streamer

文章目录 WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题 WebRTC-Streamer概述 WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具&#xff0c;它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式&#xff…...

2025年的大模型计划重点在于跨领域智能、工作流自动化、多模态能力强化

明年的计划和大模型发展方向可以围绕以下几个方面展开&#xff0c;结合实际应用场景和技术趋势&#xff0c;明确可执行的目标和期待的成果&#xff1a; 2025 年计划与展望&#xff1a;大模型能做些什么&#xff1f; 1. 更深层次的跨领域能力融合 目标&#xff1a;构建更强的跨…...

day12 接口测试 ——入门→精通→实战(1)

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、接口测试分类 1.1 内部接口&#xff1a; 1.2 外部接口&#xff1a; 2、目前接口架构设计 2.1、基于SOAP架构&#xff0c; 2.2、基于RPC架构&#xff0c; 2.3、基于RestFul架构&#xff0c; 2.3.1…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...