zoukankan      html  css  js  c++  java
  • 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

       因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了。我的处理办法就是在键盘弹起和消失的时候,让页面都回到弹起之前的状态,使用了window.scrollTo方法。

      

        keyUpClose () {
           let u = navigator.userAgent;
           let state; // 记录状态当关闭键盘时平滑滚动(smooth)一次页面
           let myFun;
           let isIos = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
                if(isIos){
                    document.body.addEventListener('focusin', () => {  //软键盘弹起事件
                        state=true;
                        clearTimeout(myFun);
                    })
                    document.body.addEventListener('focusout', () => { //软键盘关闭事件
                        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                        state=false;
                        if(!state){
                            myFun= setTimeout(function(){  
                                window.scrollTo({top:scrollTop,left:0,behavior:"smooth"})//重点 ----当键盘收起的时候让页面回到原始位置(这里的top:scrollTop
                    回到了弹窗弹起前状态) },200); }else{ return } }) }else{ return } }

      

  • 相关阅读:
    面向对象深入:继承01——子类
    面向对象的基础知识——小结
    IP地址配置
    二、RPM包管理-rpm命令管理
    一、软件包管理简介
    关机重启命令
    网络命令
    权限管理命令
    字符截取命令
    shell-正则表达式(二)
  • 原文地址:https://www.cnblogs.com/muzimumu/p/11851469.html
Copyright © 2011-2022 走看看