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

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);

后言

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

相关文章:

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

​ JS IOS 前言 在项目开发的过程中&#xff0c;在IOS手机端系统下&#xff0c;当对输入框&#xff08;input/textarea&#xff09;进行focus操作时&#xff0c;键盘弹起遮住输入框。 问题描述 从页面底部focus输入框失败从页面中间focus输入框失败 原因 造成上述问题的&…...

脚手架工程使用ElementUI

在终端中执行以下指令 npm install --save element-ui 在终端中显示added 9 packages in 10s 说明安装完成 在工程的main.js中 导入并使用ElementUI: import ElementUI from element-ui import element-ui/lib/theme-chalk/index.css Vue.use(ElementUI) 可以在*.vue页面中…...

163邮箱SMTP端口号及服务器地址详细设置?

163邮箱SMTP端口号是什么&#xff1f;163邮件SMTP设置教程&#xff1f; 除了基本的邮箱账号和密码外&#xff0c;还需要了解SMTP服务器地址和端口号&#xff0c;以及相应的设置。这些设置对于确保邮件能够顺利发送至关重要。下面&#xff0c;蜂邮EDM将详细介绍163邮箱SMTP端口…...

【STM32】STM32学习笔记-独立看门狗和窗口看门狗(47)

00. 目录 文章目录 00. 目录01. WDG概述02. 独立看门狗相关API2.1 IWDG_WriteAccessCmd2.2 IWDG_SetPrescaler2.3 IWDG_SetReload2.4 IWDG_ReloadCounter2.5 IWDG_Enable2.6 IWDG_GetFlagStatus2.7 RCC_GetFlagStatus 03. 独立看门狗接线图04. 独立看门狗程序示例105. 独立看门…...

计算机网络——IPV4数字报

1. IPv4数据报的结构 本结构遵循的是RFC 791规范&#xff0c;介绍了一个IPv4数据包头部的不同字段。 1.1 IPv4头部 a. 版本&#xff08;Version&#xff09;&#xff1a;指明了IP协议的版本&#xff0c;IPv4表示为4。 b. 头部长度&#xff08;IHL, Internet Header Length&…...

java抽象方法和抽象类

1、抽象方法 如果父类的方法本身不需要实现任何功能&#xff0c;仅仅是为了定义方法签名&#xff0c;目的是让子类去覆盖它&#xff0c;那么&#xff0c;可以把父类的方法声明为抽象方法。 class Person { // 定义抽象方法public abstract void run(); } 把一个方法声明为a…...

echarts鼠标向右/向左绘制实现放大/还原

echarts toolbox 的datazoom提供了绘制放大的功能&#xff0c;但通过鼠标绘制只能进行放大 应需求放大与还原都通过鼠标行为实现&#xff0c;增加从右往左绘制时还原放大结果 demo 结果 重写datazoom的原型方法实现绘制事件的拦截 const comp myChart._model.getComponent(to…...

Go编译DLL与SO

1. 简介 将Go编译成DLL/SO供其他语言调用。 .DLL&#xff1a;文件是 Windows 操作系统的动态链接库文件。.SO 文件是 Unix、Linux 和其他类 Unix 系统的共享库文件。 2. Go编译DLL/SO 注意 export后面导出的方法名一定要大写。 package main/* #include <stdlib.h>…...

css浮动

标准流&#xff1a;也叫文档流&#xff0c;指的是标签在页面中默认的排布规则。 浮动&#xff1a;让块级元素水平排列&#xff08;float:left/right;&#xff09;。 特点&#xff1a;浮动后的盒子顶对齐&#xff1b; 浮动后的盒子具备行内块的特点&#xff1b; 浮动后的元素脱…...

小程序怎么开发?怎么开发自己的小程序

一、明确需求与定位 在开发小程序之前&#xff0c;需要明确需求. 首先&#xff0c;明确小程序的定位非常重要。我们需要确定小程序是为了提供便捷的购物体验还是特定领域的服务。明确定位可以帮助我们更好地设计和优化小程序的功能&#xff0c;以符合用户的期望和需求。 其次…...

Unity(第十八部)物理力学,碰撞,触发、关节和材质

1、重力 刚体组件 英文中文描述RigidBody刚体组件physics->rigidbody &#xff0c;刚体组件使一个物体有了质量&#xff0c;重力等。&#xff0c;use gravity 勾选后&#xff0c;物体才会受到重力&#xff0c;会自动下落&#xff0c;取消勾选就不会。&#xff0c;&#xf…...

内网搭建mysql8.0并搭建主从复制详细教程!!!

一、安装mysql 1.1 mysql下载链接&#xff1a; https://downloads.mysql.com/archives/community/ 1.2 解压包并创建相应的数据目录 tar -xvf mysql-8.2.0-linux-glibc2.28-x86_64.tar.xz -C /usr/local cd /usr/local/ mv mysql-8.2.0-linux-glibc2.28-x86_64/ mysql mkdir…...

MYSQL 解释器小记

解释器的结果通常通过上述表格展示&#xff1a; 1. select_type 表示查询的类型 simple: 表示简单的选择查询&#xff0c;没有子查询或连接操作 primary:表示主查询&#xff0c;通常是最外层的查询 subquery :表示子查询&#xff0c;在主查询中嵌套的查询 derived: 表示派…...

具身智能计算系统,机器人时代的 Android | 新程序员

【导读】具身智能作为一种新兴的研究视角和方法论&#xff0c;正在刷新我们对智能本质及其发展的理解&#xff1a;传统的 AI 模型往往将智能视为一种独立于实体存在的抽象能力&#xff0c;而具身智能则主张智能是实体与其环境持续互动的结果。 本文深度剖析了具身智能计算系统…...

win11开启IPV6并手动设置地址

win11开启IPV6并手动设置地址 ipv6手动设置 假设你想要配置的IPv6地址是2001:0db8:85a3:0000:0000:8a2e:0370:7334&#xff0c;子网前缀长度为64位&#xff0c;并且默认网关是2001:0db8:85a3::1。 手动配置IPv6地址的示例步骤&#xff08;Windows操作系统&#xff09;&#x…...

WPF中如何设置自定义控件

1.圆角按钮的设置&#xff1a; 众所周知在WPF中自带有提示信息&#xff0c;当我问创建Button时&#xff0c;点击空格出现如下可选设置 带有小扳手&#x1f527;图标为相应的属性&#xff0c;如果Button有CornerRadius&#xff08;角半径&#xff09;属性就能够直接设置Button实…...

【Leetcode每日一题】二分查找 - 寻找旋转排序数组中的最小值(难度⭐⭐)(22)

1. 题目解析 Leetcode链接&#xff1a;153. 寻找旋转排序数组中的最小值 这个题目乍一看很长很复杂&#xff0c;又是旋转数组又是最小值的 但是仔细想想&#xff0c;结合题目给的示例&#xff0c;不难看出可以用二分的方法来解决 核心在于找到给定数组里面的最小值 2. 算法原…...

QT C++实战:实现用户登录页面及多个界面跳转

主要思路 一个登录界面&#xff0c;以管理员Or普通用户登录管理员&#xff1a;一个管理员的操作界面&#xff0c;可以把数据录入到数据库中。有返回登陆按钮&#xff0c;可以选择重新登陆&#xff08;管理员Or普通用户普通用户&#xff1a;一个主界面&#xff0c;负责展示视频…...

我的世界游戏服务器平台推荐哪里找?

我的世界服务器可以在多个平台上租赁&#xff0c;以下是一些推荐的游戏服务器平台。 1.玩家可以通过互联网上的一些平台租用游戏服务器。其中&#xff0c;国内大厂平台有阿里云、腾讯云、华为云等。这些平台提供了丰富的服务器配置和带宽选择&#xff0c;玩家可以根据自己的需求…...

用于制作耳机壳的倒模专用UV树脂有什么特点?

制作耳机壳的UV树脂耳机壳UV胶具有以下特点&#xff1a; 快速固化&#xff1a;UV树脂可以在紫外线的照射下迅速固化&#xff0c;大大缩短了制作时间。高硬度与高耐磨性&#xff1a;UV树脂具有较高的硬度和耐磨性&#xff0c;能够提供良好的保护效果。透明度高&#xff1a;UV树…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

JVM 内存结构 详解

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

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...