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

news/2024/11/13 22:03:46/

最近在做一个移动端的项目,底部的输入框获得焦点时,软键盘弹起,在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手…