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 });

       }

    }

  • 相关阅读:
    cogs 775. 山海经
    [HZOI 2016][Tyvj 1729]文艺平衡树 这道题我真是哭了,调了一下午,一晚上
    几种平衡树
    bzoj1124 [POI2008]枪战Maf
    [Usaco2007 Open]Fliptile 翻格子游戏
    团队冲刺08
    团队冲刺07
    团队冲刺06
    团队冲刺05
    团队冲刺04
  • 原文地址:https://www.cnblogs.com/chung2017/p/9675114.html
Copyright © 2011-2022 走看看