web中ios移动端软键盘收起后,页面内容留白不下滑
微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图

这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置。
这里就监听键盘收起的事件,来改变滚动条位置。
//这里区分系统方法和键盘弹出和收起在前两篇文章有记录
document.body.addEventListener('focusout', this.focusoutFunc); //软键盘收起的事件处理
let _isIOS = -1;
export function isIOS() {
if (_isIOS === -1) {
_isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0;
}
return _isIOS === 1;
}
//软键盘弹出的事件处理
focusoutFunc = () => {
//isIOS函数在前面
if (isIOS()) {
window.scrollTo(0,0)
}
}
web中ios移动端软键盘收起后,页面内容留白不下滑的更多相关文章
- IOS微信端软键盘收起后界面按钮失效问题
问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- h5 ios移动端,键盘收起以后页面不归位
$('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function() ...
- h5页面ios键盘弹出收起后页面底部留白问题
<input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- IOS键盘收起后,页面底部留白处理
环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
随机推荐
- C#如何调用以管理员身份运行的cmd命令提示符
windows自从vista.win7.win8/8.1以及win10以来,命令行提示符分为两种模式,一种是普通用户模式,一种的管理员模式,很多情况下,我们的程序需要在命令提示符(管理员身份)的状况下 ...
- day 45 BOM和DOM
一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行“对话”. 1. window 对象 一些常用的Window方法: ( ...
- python发送短信和发送邮件
先注册好 发短信脚本内容 #接口类型:互亿无线触发短信接口,支持发送验证码短信.订单通知短信等. #账户注册:请通过该地址开通账户http://sms.ihuyi.com/register.html ...
- 2018-2019-2 网络对抗技术 20165308 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165308 Exp3 免杀原理与实践 实践内容(3.5分) 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分) ...
- 剑指offer 8.递归和循环 跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 解题思路一: a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是 ...
- C# .NET MODEL 复制,实体类复制
-- /// <summary> /// 将T1 实体的参数复制给 T2 ,不能处理多层次 /// </summary> /// <typeparam name=&quo ...
- Delphi编译选项
编译选项的设置,称为“开关指令”,其中大部分值为布尔类型 一.代码生成(Code generation)1.Optimization 优化代码,默认true2.Stack frames 生成过程/ ...
- 2018-2019-20175334实验二《Java面向对象程序设计》实验报告
2018-2019-20175334实验二<Java面向对象程序设计>实验报告 一.实验内容及步骤 实验二面向对象程序设计-1 参考 http://www.cnblogs.com/roce ...
- Director.js
Director.js 源码 // // Generated on Tue Dec 16 2014 12:13:47 GMT+0100 (CET) by Charlie Robbins, Paolo ...
- nvidia驱动自动更新版本后问题解决 -- failed to initialize nvml: driver/library version mismatch
因为必须关闭桌面窗口, 建议另外一台电脑ssh连接操作 1. 卸载旧版本并关闭图形界面 sudo apt-get remove --purge nvidia-\* sudo service light ...