微信里面打开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移动端软键盘收起后,页面内容留白不下滑的更多相关文章

  1. IOS微信端软键盘收起后界面按钮失效问题

    问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...

  2. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  3. h5 ios移动端,键盘收起以后页面不归位

    $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function() ...

  4. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  5. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

  6. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  7. IOS键盘收起后,页面底部留白处理

    环境:vue+vant 的H5页面 场景:输入框输入信息时,如登录.注册等表单信息 问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作 解决方案:监听失去焦点时 ...

  8. input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  9. js-移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

随机推荐

  1. linux 软件应用

    grub2 安装grub2到某分区 mount /mnt/dev /dev/sdb2 //这里选择你刚才分区的第二个分区 sudo grub-install --root-directory=/mnt ...

  2. KiCad 一款强大的 BOM 和 装配图生成插件

    KiCad 一款强大的 BOM 和 装配图生成插件 可以生成 BOM 和在线的图形. https://github.com/openscopeproject/InteractiveHtmlBom In ...

  3. DockerToolbox在Win7上的安装和设置

    为什么使用Docker Toolbox Docker在Windows上使用有两种方式,一是利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端,二是利用Wi ...

  4. Spring boot加载REACTIVE源码分析

    一,加载REACTIVE相关自动配置 spring boot通过判断含org.springframework.web.reactive.DispatcherHandler字节文件就确定程序类型是REA ...

  5. awesome资源包

    .NET资源包 https://github.com/jobbole/awesome-dotnet-cn java资源包 https://github.com/jobbole/awesome-java ...

  6. golang实现的简单优先队列

    下面是golang实现的简单优先队列,参考信息可以查看https://golang.org/pkg/container/heap/或者https://golang.google.cn/pkg/cont ...

  7. [UE4]引用Grabbable接口

    一.当前:可抓取对象的类型是GrabTargetActor 二.修改目标:可抓取对象的类型改成Grabbable. 1.Fand Grab Target的返回值改成Grabbale(变量的数据类型可以 ...

  8. ZooKeeper是按照CP原则构建的,不适合做Service服务发现

    一.cap 分布式领域中存在CAP理论,且该理论已被证明:任何分布式系统只可同时满足两点,无法三者兼顾. ①C:Consistency,一致性,数据一致更新,所有数据变动都是同步的. ②A:Avail ...

  9. Oracle数据库ORA-01109 数据库未打开

    引致 https://blog.csdn.net/colinmok/article/details/39504879?locationNum=11&fps=1  感谢! 在plsql创建了2表 ...

  10. python 字符串转16进制函数

    需要用python处理16进制的文本,比如像下面这个文本 40 80 C0 40 80 C0 40 80 C0 40 80 C0 40 BF CC 40 80 C0 40 80 C0 40 80 C0 ...