zoukankan      html  css  js  c++  java
  • Layman 解决MUI 软键盘弹起挤压页面问题

    问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况

    当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面、软键盘遮挡输入框等一系列问题; 

    原因:造成这种现象的原因是,当软键盘弹出的时候,webview窗口被挤压,高度变小了,所以这个时候,绝对定位的按钮就会跟随webview一起上移,给人的感觉就是按钮被顶上去了; 

    解决办法:在安卓手机上,当页面被挤压的时候,页面大小发生了改变,会触发onresize事件,在页面出口变小的时候,手动去设置webview的高度大小,就能解决问题;

    //获取原始窗口的高度

    var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;

    window.onresize=function(){

       //软键盘弹起与隐藏 都会引起窗口的高度发生变化

      var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;

      if(resizeHeight*1<originalHeight*1){

        //resizeHeight<originalHeight证明窗口被挤压了

        plus.webview.currentWebview().setStyle({ height:originalHeight });

       }

    }

  • 相关阅读:
    汇编/操作系统 索引帖
    极地网络
    河中跳房子游戏
    搬家大吉QAQQAQ
    【USACO3.1.1】Agri-Net最短网络
    浅谈二叉树
    Android面试经验汇总(二)
    Android面试经验汇总(一)
    Android 聊天室(二)
    Android 聊天室(一)
  • 原文地址:https://www.cnblogs.com/chung2017/p/9675114.html
Copyright © 2011-2022 走看看