js处理IOS虚拟键盘弹出后输入框被遮住


JS IOS

前言

在项目开发的过程中,在IOS手机端系统下,当对输入框(input/textarea)进行focus操作时,键盘弹起遮住输入框。

问题描述

  1. 从页面底部focus输入框失败
  2. 从页面中间focus输入框失败

原因

造成上述问题的:键盘弹起事件和输入框滚动到浏览器窗口的可见区域的事件有冲突。

解决步骤

根据不同的情况有不同的解决办法:

  1. 从页面底部focus输入框失败:
    使用scrollIntoView方法:该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
setTimeout(() => {document.activeElement.scrollIntoView()
}, 200)

注意:这里需要使用settimeout去异步请求

  1. 从页面中间focus输入框失败:
let screenHeight = window.innerHeight;let keyboardHeight = 0let time = 0;// 获取键盘高度let interval  = setInterval(() => {if (screenHeight !== window.innerHeight) {                keyboardHeight = screenHeight-window.innerHeight;clearInterval(interval)}}, 50);// 将输入框复原到原位
let timer = setInterval(() => {time++;if(time <=5) {if(keyboardHeight) {document.documentElement.scrollTop = keyboardHeight + 110}} else {clearInterval(timer)}}, 50);

后言

希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通

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

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

相关文章

【MySQL】_自连接与子查询

目录 1. 自连接 2. 子查询&#xff08;嵌套查询&#xff09; 2.1 子查询分类 2.2 单行子查询示例1&#xff1a;查询不想毕业同学的同班同学 2.3 多行子查询示例2&#xff1a;查询语文或英语课程的信息成绩 3. 合并查询 3.1 示例1&#xff1a;查询id3或者名字为英文的课程…

Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder

概述 当界面的内容需要依靠网络请求的数据&#xff0c;就需要处理苦恼的&#xff0c;状态是空&#xff0c;非空的逻辑了&#xff0c;不然页面构建可能会报错&#xff0c;而FutureBuilder提供了一个非常好的解决方法&#xff0c;直接看代码 代码 异步操作函数 即网络请求函数…

[CISCN2019 华北赛区 Day2 Web1]Hack World 1 题目分析与详解

一、分析判断 进入靶机&#xff0c;主页面如图&#xff1a; 主页面提供给我们一条关键信息&#xff1a; flag值在 表flag 中的 flag列 中。 接着我们尝试输入不同的id&#xff0c;情况分别如图&#xff1a; 当id1时&#xff1a; 当id2时&#xff1a; 当id3时&#xff1a; 我…

YOLOv8改进涨点,添加GSConv+Slim Neck,有效提升目标检测效果,代码改进(超详细)

目录 摘要 主要想法 GSConv GSConv代码实现 slim-neck slim-neck代码实现 yaml文件 完整代码分享 总结 摘要 目标检测是计算机视觉中重要的下游任务。对于车载边缘计算平台来说&#xff0c;巨大的模型很难达到实时检测的要求。而且&#xff0c;由大量深度可分离卷积层构…

【Redis | 第三篇】Springboot整合Redis

文章目录 3.Springboot整合Redis3.1Spring Data Redis介绍3.2整合步骤3.2.1导入依赖3.2.2配置redis数据源3.2.3使用RedisTemplate进行操作&#xff08;1&#xff09;创建RedisTemplate Bean&#xff08;2&#xff09;注入RedisTemplate&#xff08;3&#xff09;执行Redis操作&…

C++:常量表达式

C11开始constexpr作为一种声明&#xff0c;为编译器提供了在编译期间确认结果的优化建议&#xff0c;满足部分编译期特性的需求 constexpr和const区别 int b10; const int ab; //运行成功 constexpr int cb; //编译器报错&#xff0c;b的值在编译期间不能确定 const int size1…

面试笔记系列二之java基础+集合知识点整理及常见面试题

目录 Java面向对象有哪些特征&#xff0c;如何应用 Java基本数据类型及所占字节 Java中重写和重载有哪些区别 jdk1.8的新特性有哪些 内部类 1. 成员内部类&#xff08;Member Inner Class&#xff09;&#xff1a; 2. 静态内部类&#xff08;Static Nested Class&#…

Vue 组件和插件:探索细节与差异

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

Linux查看进程占用句柄

ps -ef |grep python # 查找工具执行PID python pid 11287lsof -p 11287 |wc -l 查看进程占用句柄设置句柄上限IOError: [Errno 24] Too many open files:解决方法

阿里云短信验证笔记

1.了解阿里云的权限操作 进入AccessKey管理 选择子用户 创建用户组和用户 先创建用户组&#xff0c;建好再进行权限分配 添加短信管理权限 创建用户 创建好后的id和密码在此处下载可以得到 2.开通阿里云短信服务 进行申请&#xff0c;配置短信模板 阿里云短信API文档 短信服务…

逆向案例三:动态xhr包中AES解密的一般步骤,以精灵数据为例

补充知识&#xff1a;进行AES解密需要知道四个关键字&#xff0c;即密钥key,向量iv,模式mode,填充方式pad 一般网页AES都是16位的&#xff0c;m3u8视频加密一般是AES-128格式 网页链接:https://www.jinglingshuju.com/articles 进行抓包结果返回的是密文&#xff1a; 一般思…

性能测试-jvm

1、jps&#xff1a; 查看java进程 [rootVM-100-3-centos ~]# jps 7088 Jps 1521 ruoyi-admin.jar 3978 sys_perf_01-0.0.1-SNAPSHOT.jar [rootVM-100-3-centos ~]# 2、jmap&#xff1a; 查看java内存 [rootVM-100-3-centos ~]# jmap -heap 3978 Attaching to process ID 39…

【算法大家庭】分治算法

目录 &#x1f953;1.简单介绍 &#x1f9c8;2.汉诺塔问题 1.简单介绍 分治算法是解决问题的一种思想&#xff0c;它将一个大问题分解成若干个小问题&#xff0c;然后分别解决这些小问题&#xff0c;最后将小问题的解合并起来得到原问题的解。 分解&#xff1a;将原问题分解…

我的创作纪念日(直接跳过)

机缘 转眼已经工作多年了&#xff0c;在工作中收获了很多&#xff0c;也成长了很多。仔细写的话也不是几句话能概括完整的。 收获 时常记录一些心得或者是步骤&#xff0c;分享踩过的坑。有些时候同样的操作自己还会回来看看&#xff0c;说明还是有不少用处。 日常 随心&…

Mazing官方 2.17.17版新i功能介绍

iMazing官方 2.17.17版是一款管理苹果设备的软件&#xff0c;是一款帮助用户管理 IOS 手机的PC端应用程序&#xff0c;能力远超 iTunes 提供的终极 iOS 设备管理器。在iMazing官方版上与苹果设备连接后&#xff0c;可以轻松传输文件&#xff0c;浏览保存信息等&#xff0c;功能…

SD-WAN对云服务的影响

近年来&#xff0c;随着企业对云服务的依赖不断增加&#xff0c;SD-WAN技术成为提升连接性能的热门选择。SD-WAN通过简化云集成和连接&#xff0c;以及提升应用程序性能&#xff0c;为企业带来显著的业务优势。这种云连接的改进使企业能够更轻松地接触全球劳动力和潜在客户。 首…

语文专刊《中学语文》是什么级别的刊物?

语文专刊《中学语文》是什么级别的刊物&#xff1f; 《中学语文》创刊于1958年&#xff0c;由国家新闻出版总署批准&#xff0c;经湖北省教育厅主管的省级学术期刊。 《中学语文》是由湖北大学文学院主办、国内外公开发行的学术期刊&#xff0c;主要面向中学语文教师和语文教…

盘点:好用的伪原创文章生成器软件

伪原创文章生成器软件在内容创作域领应用的非常广泛&#xff0c;它不仅可以为创作人员解决文章或文案创作困难的问题&#xff0c;同时还可以作为提升创作效率的完美工作&#xff0c;然而随着互联网技术的发展&#xff0c;互联网上的伪原创文章生成器软件多到让人应接不暇&#…

【前端】数据处理

1、校验是否缺少必填字段 const tableHeader [测站编码, 曲线名称, 启用时间, 点序号, 水位(m), 流量(m/s)];function checkMissingFields(tableHeader) {const requiredFields [*曲线名称, *水位(m), *测站编码, *流量(m/s)];const missingFields [];requiredFields.forEa…

vue项目中区域拖拽修改大小, Vue Grid Layout -️ 适用Vue.js的栅格布局系统

目录 一、安装 二、使用 三、属性介绍 GridLayout GridItem 四、事件介绍 GridLayout layoutCreated layoutBeforeMountEvent layoutMountedEvent layoutReadyEvent layoutUpdatedEvent breakpointChangedEvent GridItem moveEvent resizeEvent movedEvent re…