当前位置: 首页 > 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…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...