ios H5 页面弹窗被软键盘上推页面卡死问题

首先描述一下问题场景:
在iso下的H5页面做了一个弹窗,弹窗内带输入框,给用户注册
会员用。但是测试发现输入框失去焦点时,页面没有回弹整个界面
卡死。如图!

我用的不是IOS手机 只是展示一下问题场景,有同样情况的才可
对症下药继续往下看。
然后引用一下啊一个大佬的文章也是我在解决这个问题时候看到的

原理讲解链接

这篇文章详解了为什么会出现这种情况,坐着也给出了解决办法,
但是对于多个输入框,我个人经过尝试,找到了一种新的办法,
因为如果如文章中每次都去滚动内容,交互体验方面会造成影响。
我所在项目是基于uni的一些已经封装过的input组件。
源生的这个办法也会通用。

先上input写法 <input style="flex:1" @blur="onBlur" @focus="inputFocus" type="text" placeholder="请输入手机号"/>

vue内的方法
 inputFocus() {
        // #ifdef  H5
        this.hasDown=true;
        // #endif
    },

    onBlur(){
        // #ifdef  H5
        this.hasDown=false;
        setTimeout(() => {
            if(!this.hasDown){
                window.scrollTo(0,0);
                document.getElementsByTagName('body')[0].scrollTop = 0;
            }
        }, 200);
            // #endif
    },
    然后说一下原理,其实原理很简单,为了不影响用户体验,
    不会再每次失去焦点的时候推动屏幕,而是做了200毫秒的延时
    也就是说用户在失去焦点,但是没有继续获得焦点的情况下
    才会去推动屏幕。正好适合面对多个输入框的情况。
原文链接:segmentfault.com

上一篇:封装常用的插件
下一篇:微前端(singleSpa + React )试玩

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    3 个月前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    1 个月前
  • 高德APP启动耗时剖析与优化实践(iOS篇)

    前言最近高德地图APP完成了一次启动优化专项,超预期将双端启动的耗时都降低了65%以上,iOS在iPhone7上速度达到了400毫秒以内。就像产品们用后说的,快到不习惯。

    2 个月前
  • 项目整理11.27——axios相关

    1、配置请求的根路径 2、请求任意接口之前进行统一拦截判断 (https://img.javascriptcn.com/539d96611a9889...

    7 个月前
  • 项目中的导航栏搜索及搜索页面的思路

    项目背景 今天项目里的实习生在做搜索功能时,导航栏的搜索框与搜索页面的搜索框,在内容上竟然是各自独立的。。。。。 无论他怎么鼓捣,在搜索栏上进行搜索,搜索页面都没有任何反应。

    2 个月前
  • 页面间通信--使用storage事件保持多tab页共享轮询请求的数据

    业务场景 最近接到一个优化需求,某页面会轮询请求两个接口获取未读消息的数量,但是当用户同时在多个tab打开了页面的话,这些页面都会进行轮询请求,有用户打开tab页太多,1分钟请求了几千次,触发了风控,...

    1 个月前
  • 页面进入后台如何关闭背景音乐

    之前在做小程序的时候遇到一个问题:小程序中有一个webview页面,这个页面中用iframe嵌套了一个H5页面,这个H5页面中有背景音乐,背景音乐播放的情况下,点击小程序右上角退出的小圆圈背景音乐仍然...

    1 年前
  • 页面跳转的归纳

    前端工作有很多地方需要页面跳转,有很多种实现方法,这里做一下归纳。 HTML标签 一般形式上可以用target="blank": 历史跳转 ...

    2 年前
  • 页面跳转时,点击上报丢失问题解析

    背景 最近在工作中,遇到了页面跳转时点击上报丢失的问题,突出表现在微信ios的webview上,上报后直接跳转的失败率达到了惊人的93%。喝口水压压惊,开始逐步分析问题的发生。

    2 年前
  • 页面跳转中的安全问题

    最近参与了一小部分安全排查,涉及到一些前端编码安全问题,记个小tip。 1.Http请求头中的Referer 0a2b525c5fc64af362821115x362.png@900090f.p...

    7 个月前

官方社区

扫码加入 JavaScript 社区