思路:1.判断是否在微信中
           2.判断是否在ios中
           3.表单元素焦点将页面滚回到顶部

是否是微信环境

  1. isWx() {
  2. let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串
  3. console.log(ua);
  4. if (ua.indexOf("micromessenger") > -1) {
  5. return true;
  6. } else {
  7. return false;
  8. }
  9. },

是否是ios终端

  1. isIos(){
  2. let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串
  3. console.log(ua);
  4. if (ua.indexOf("iphone") > -1 || ua.indexOf("ios") > -1) {
  5. return true;
  6. } else {
  7. return false;
  8. }
  9. },

焦点消失滚动到顶部解决留白

  1. // 解决微信环境,ios下,键盘收起留白问题
  2. fixScroll() {
  3. if (this.isWx() && this.isIOS()) {
  4. console.log("解决留白");
  5. window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
  6. }
  7. },

使用:

  1. <input
  2. type="text"
  3. @blur="fixScroll"
  4. v-model="graphicsCode"
  5. name="graphicsCode"
  6. placeholder="请输入图形验证码"
  7. />

js - 解决微信环境下,ios软键盘收起后页面空白的更多相关文章

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

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

  2. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  3. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

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

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

  5. 解决微信小程序使用switchTab跳转后页面不刷新的问题

    wx.switchTab({ url: '../index/index', success: function(e) { var page = getCurrentPages().pop(); if ...

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

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

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

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

  8. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

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

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

  10. ios 软键盘弹出布局被顶上去 已解决

          document.body.addEventListener('focusout', () => {             //软键盘收起的事件处理             set ...

随机推荐

  1. day01-家具网购项目说明

    家具网购项目说明 1.项目前置技术 Java基础 正则表达式 Mysql JDBC 数据库连接池技术 满汉楼项目(包括框架图) JavaWeb 2.相关说明 这里先使用原生的servlet/过滤器,后 ...

  2. 重学c#系列——linq(3) [二十九]

    前言 继续介绍一些复杂的linq. 正文 groupjoin 这个函数: 有department public class Deployment { public string Id { get; s ...

  3. JavaScript:是一种什么样的编程语言?

    有关JavaScript的发展历程,百度百科上已经说得很清楚了,这里不赘述,只是想谈一下我刚刚接触JS的一些感触. 作为后端java开发者,初次学习JS的时候,真的觉得JS非常的不严谨,很混乱.由于它 ...

  4. .net core-利用PdfSharpCore 操作PDF实例

    前序 使用PdfSharpCore请注意使用XGraphics基类,与System.Drawing 的Graphics类似,XGraphics 提供XColor(颜色).XPen(画笔).XBrush ...

  5. 自研ORM Include拆分查询(递归算法 支持无限层级) 性能优化探讨

    最近我在优化 Include 拆分查询,贴出源码供大家交流探讨是否还有优化空间. 测试代码 1 Console.WriteLine($"总记录数:{db.Query<Category& ...

  6. 微服务框架——MybatisPlus

    MybatisPlus 一.快速入门 1.mybatisPlus特性 无侵入:只增强,不改变. 损耗小:启动的时候直接注入基本CRUD 强大的CRUD操作:提供通用Mapper,通用service,条 ...

  7. flutter报错The type of the function literal can't be inferred because the literal has a block as its body.A value of type 'String?' can't be assigned to a variable of type 'String'.

    flutter有一些报错如下 The type of the function literal can't be inferred because the literal has a block as ...

  8. 迁移学习(ADDA)《Adversarial Discriminative Domain Adaptation》

    论文信息 论文标题:Adversarial Discriminative Domain Adaptation论文作者:Eric Tzeng, Judy Hoffman, Kate Saenko, Tr ...

  9. Object类中wait带参方法和notifyAll方法-线程间通信

    Object类中wait带参方法和notifyAll方法 void wait (在其他线程调用此对象的notify()方法或notifyAll()方法前,导致当前线程等待.void wait  (lo ...

  10. KingbaseES数据库目录结构

    KingbaseES数据库目录结构 [kingbase@postgres V8]$ tree -LP 2 data/ . ├── data │ ├── base # 存储用户创建的数据库文件及隶属于用 ...