微信里面打开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. 一键安装Davinci

    官网:https://edp963.github.io/davinci/index.html 下载地址:https://github.com/edp963/davinci   环境:Centos7   ...

  2. 学习Xposed --记WX功能分析的过程

    首先,这个不是写个新手看的,内容比较粗略,把几个关键点自己列一下,以做记录 首先,我对andriod不懂,对java本身也不是非常熟,也从来没写过andriod或java的程序,但本着曾经对编程的理解 ...

  3. volatile和不加volatile的区别

    http://blog.chinaunix.net/uid-25100840-id-3067899.html 对于一个地址,如果加上了volatile参数,这个地址也就不会经过编译器优化,也就是说这个 ...

  4. 解决讨厌的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    问题: 执行任何hadoop命令,都会提示如下WARN.虽然影响不大,但是每次运行一个命令都有这么个WARN,让人很不爽,作为一个精致的男人, 必须要干掉它. [root@master logs]# ...

  5. 多态,封装,反射,类内置attr属性,os操作复习

    1.多态 #多态 多态是指对象如何通过他们共同的属性和动作来操作及访问,而不需要考虑他们具体的类 运行时候,多种实现 反应运行时候状态 class H2O: def __init__(self,nam ...

  6. 重置SQLSERVER表的自增列,让自增列重新计数

    SQL的自增列挺好用,只是开发过程中一旦删除数据,标识列就不连续了 写起来 也很郁闷,所以查阅了一下标识列重置的方法 发现可以分为三种: --- 删除原表数据,并重置自增列truncate table ...

  7. 最长重复字符串题解 golang

    最长重复字符串题解 package main import ( "fmt" "strings" ) type Index map[int]int type Co ...

  8. Jmeter发送邮件功能SMTP Sampler

    介绍Jmeter的发送邮件功能,使用的Sampler是SMTP Sampler,详细说明每个配置项的功能 从上往下介绍需要用到的配置项: Server settings Server: 服务器地址 P ...

  9. 转发:VB程序操作word表格(文字、图片)

    很多人都知道,用vb操作excel的表格非常简单,但是偏偏项目中碰到了VB操作word表格的部分,google.baidu搜爆了,都没有找到我需要的东西.到是搜索到了很多问这个问题的记录.没办法,索性 ...

  10. Pandas中Loc用法总结

    摘自:http://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.loc.html 具体用法,假设数据源为: > ...