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

       }

    }

  • 相关阅读:
    【POJ1743】Musical Theme(后缀数组,二分)
    【BZOJ1031】字符加密Cipher(后缀数组)
    gui线程
    线程同步
    多线程
    java记事本
    gui界面2048小游戏
    IO流+数据库课后习题
    数据库(批处理, 事务,CachedRawSetImpl类
    java(try块语句变量,和匿名类变量生存时间
  • 原文地址:https://www.cnblogs.com/chung2017/p/9675114.html
Copyright © 2011-2022 走看看