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

2019-11-18 admin
首先描述一下问题场景:
在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毫秒的延时
    也就是说用户在失去焦点,但是没有继续获得焦点的情况下
    才会去推动屏幕。正好适合面对多个输入框的情况。

[转载]原文链接:https://segmentfault.com/a/1190000021045193

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79407.html

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

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部