iphone 软键盘弹起,禁止页面整体往上滚动

news/2023/12/4 20:11:24

最近在做一个移动端的项目,底部的输入框获得焦点时,软键盘弹起,在IOS手机上火把页面整个卷走,只看到页面的下半部分。

首先经过反复调试,找到两条重要线索:

1、先找到键盘弹起时页面中会改变的值:
测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度 、被卷去的高度這几个值是否的改变(iphone 5真机测试 320*568)。

    scrollHeight:504  不变offsetHeight:504  不变clientHeight: 504  不变innerHeight: 206   改变scrollTop:298     改变改变的值有文档显示高度innerHeight、被卷去的高度scrollTop这两个值

2、找到一条线索,当输入框在页面中的位置,比键盘高度高时,软键盘弹起,不会引起页面往上滚。

于是我就這样想,当键盘弹起时,就先手动让输入框弹上来,那么页面就不会滚了,然后缩短页面高度,让输入框落到页面底部。

具体做法:

 // 1、输入框获取焦点,判断是否为IOS,如果是,把input的bottom值设为文档高度,让input先飞上天,// 2、因为之前测试到,页面被滚走的时候,window.innerHeight会改变,所以等键盘弹起时(设置的100ms),// 动态改变body.height为window.innerHeight,把body的高度缩短到文档可是区域高度,// 然后设置input的bottom为0,这样在视觉上就实现了效果啦
handleFocus() {if (isIOS()) {this.$refs.botFooter.style.bottom = window.innerHeight + 'px'setTimeout(() => this.reset(), 100)}
},reset() {document.body.style.height = window.innerHeight + 'px'this.$refs.botFooter.style.bottom = 0
}

我做的這个项目是嵌套在app中的,亲测有效,并且项目已上线。app中的浏览器不会出现ios自带浏览器中下方左右翻页的那个菜单条,所以在IOS自带浏览器中可能还有问题。


http://www.ppmy.cn/news/729790.html

相关文章

苹果手机输入中文不会触发onkeyup事件

今天同事的项目有这个问题,用我的安卓手机输入中文是ok的,但是苹果手机就不行 使用keyup事件检测文本框内容: $(#keyup_i).bind(keyup, function(){ $(#keyup_s).text($(this).val()); } 本来是上面这种处理方式,现在改成下面这样…

java swing游戏编程高仿金山打字教程-拯救苹果

原文:java swing游戏编程高仿金山打字教程-拯救苹果 源代码下载地址:http://www.zuidaima.com/share/1786650901515264.htm 这几天学习了一下java的Frame中的绘图,于是做了一个和以前的金山打字游戏中拯救苹果有点像的游戏,如果想…

简易打字游戏---Swing

今天的java课程实验题就是用Swing线程同步实现一个简易打字游戏 话不多说直接看源码 解题思路 直接设置三个java文件,一个ThreadWordMainClass文件作为主程序,WordThread文件作为打字的线程,每一个Unicode码对应一个字符集,Thread…

IOS中输入框被软键盘遮挡的解决办法

做IOS开发时,难免会遇到输入框被键盘遮掩的问题。上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了。 有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScrollView )中,然…

swift:iOS模拟器键盘设置(弹出,中文键盘,隐藏)

1 当点击UItextField输入框时,没有弹出虚拟键盘 解决方案:取消勾选Hardware>Keyboard>Connection HardWare Keyboard选项 2 想要模拟器的虚拟键盘有中文输入 解决方案:成功运行模拟器后, 回到模拟器主界面(Command+shift+H),找到设置Settings,进入Settings &…

怎么在苹果手机计算机上打字,苹果手机怎样设置打字是中文的

1、首先必须在电脑中安装新版的苹果iTunes工具,然后打开iTunes软件,进入软件界面之后,我们点击其右上角的菜单按钮,然后选择“iTunes Store登录” 2、之后我们按照提示输入我们自己的苹果账号用户于密码,然后进行登录即…

处理ios软键盘弹起和收起时页面滚动问题

处理ios软键盘弹起和收起时页面滚动问题 背景: 在开发添加主播功能时,页面底部需要弹出一个抽屉弹窗,点击抽屉上的输入框,会唤起软键盘,由于iOS的软键盘触发方式是将页面滚动,所以导致页面位置偏移 bug描…

简单的手机记事本app怎么查看提醒列表?

很多人平时都有随手记事的习惯,在记录事情的时候使用手机上的记事本app是一个不错的选择。有的记事本功能比较完善,不但能记事还能设置提醒,当有多条提醒内容存在时,简单的手机记事本app怎么查看提醒列表呢?以iPhone手…

docker deploy rancher

docker run --privileged -d --name rancher --restartunless-stopped -p 80:80 -p 443:443 rancher/rancher:latest docker ps docker logs 4d890c673011 2>&1 | grep “Bootstrap Password:”

oracle查询有关键字做表字段的表

例子: 比如:表字段有values,它是一个关键字,若sql查询它,需要如下: “VALUES”:大写双引号 select name,“VALUES” from GINEE_PRODUCT_VARIANT_OP where product_id #{productId}

docker学习遇到的问题

一、Centos7 通过proxy 使用docker pull 镜像 内网环境中通过代理上网是无法通过docker pull拉去镜像的 [rootk8s system]# docker search nginx Error response from daemon: Get https://index.docker.io/v1/search?qnginx&n25: dial tcp: lookup index.docker.io on…

领创集团完成4亿+美元D轮融资,跻身科技独角兽行列

领创集团作为新加坡AI技术驱动的科技企业,近日已完成超4亿美元的融资。这次融资之后,领创集团成为新加坡最大的独立科技创业公司之一,估值已超过20亿美元。据悉,此次融资由软银愿景基金二期和华平投资领投,北极星资本、…

领创集团位列领英2021 最佳创业公司“新加坡创业企业15强”榜首

2021年9月,领创集团在领英发布的2021最佳创业公司榜单中位列“新加坡创业企业15强”榜首。领英是全球知名的职场社交平台,为了制定筛选榜单,主要从就业率、敬业度、工作兴趣、对顶尖人才的吸引力四个维度来进行考察。 业率指上榜公司在2020年…

应用实践 | 海量数据,秒级分析!Flink+Doris 构建实时数仓方案

作者 : 苏浩 业务背景 Advance Intelligence Group(领创集团)成立于 2016 年,是一家以 AI 技术驱动的科技集团,致力于通过科技创新的本地化应用,改造和重塑金融和零售行业,以多元化的业务布局…

在lcd和服务器显示实时数据,ARM11嵌入式系统实时网络通信和LCD显示的实现.pdf

ARM11嵌入式系统实时网络通信和LCD显示的实现.pdf 2011年8月15日 现代电子技术 Aug.201l ModernE1ectronics 第34卷第16期 Technique V01.34No.16 周安栋1,张伽伟1,石鸿萍2 510320) (1.海军工程大学电子工程…

扒了上百家新加坡科技企业,我们发现领创集团的经济影响力不容忽视

对以AI技术驱动发展的领创集团来说,服务对象包括各行各业,甚至还有普通老百姓的生活。 人类从蒸汽时代、电气时代、信息技术革命再到如今以人工智能驱动的第四次工业革命,都是通过科技创新和技术改革,扩展了人类改变世界的深度和…

Advance Intelligence Group 领创集团AI技术推动公司扩大发展市场

从新加坡的初创企业到如今业务横跨多国的AI技术集团公司,Advance Intelligence Group(领创集团)过渡到真正意义上的全球化,近期完成了D轮融资,估值已经超过了20亿美元,成为新加坡最大的独立科技创业公司之一…

Jenkins + Docker + Maven + Windows 一键部署 Spring Boot 程序到远程 Linux 服务器

Jenkins Docker Maven Windows 一键部署 Spring Boot 程序到远程 Linux 服务器 文章目录 Jenkins Docker Maven Windows 一键部署 Spring Boot 程序到远程 Linux 服务器一、准备1、环境2、基本流程准备步骤基本思路 3、相关命令4、Dockerfile 文件5、配置远程服务器、安装…

深入了解「社区代表」在网络治理的地位和角色

去中心化治理使Token持有者能够积极且活跃地参与塑造网络的未来。然而,由于时间限制、缺乏专业知识等因素,Token持有者并不会直接参与每项提案投票。这就是社区代表发挥作用的舞台,弥补了Token持有者和决策过程之间的差距。 本文将介绍“社区…

模拟CSRF攻击

今天给大家表演一个拙劣的CSRF攻击。 我会编写两个应用:一个是正经应用,一个是钓鱼的应用。然后让后者攻击前者,让它打钱! 一、绪论 1.1 先聊聊Cookie 参考:常用的本地存储——cookie篇 Cookie在八股文里面好像已…
最新文章