问题:在使用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 });

   }

}

Layman 解决MUI 软键盘弹起挤压页面问题的更多相关文章

  1. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  2. Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

    最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...

  3. 解决react-native软键盘弹出挡住输入框的问题

    解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...

  4. android全屏下的输入框未跟随软键盘弹起问题

    最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...

  5. H5软键盘弹起收回(IOS与Android)

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  6. Android之监听手机软键盘弹起与关闭

    背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...

  7. uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白

    加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });

  8. h5 移动端 监听软键盘弹起、收起

    前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...

  9. 使用WebView时软键盘遮挡H5页面解决办法

    简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...

随机推荐

  1. 力扣Leetcode 1248. 统计「优美子数组」

    统计「优美子数组」 给你一个整数数组 nums 和一个整数 k. 如果某个 连续 子数组中恰好有 k 个奇数数字,我们就认为这个子数组是「优美子数组」. 请返回这个数组中「优美子数组」的数目. 示例 ...

  2. 揭秘 Kubernetes attach/detach controller 逻辑漏洞致使 pod 启动失败

    前言 本文主要通过深入学习k8s attach/detach controller源码,了解现网案例发现的attach/detach controller bug发生的原委,并给出解决方案. 看完本文 ...

  3. 领导给了一堆无序杂乱的数据,我写了个Python自动化脚本

    这个问题算是群友答疑.如果说同事或者老板给你一堆这样的数据,你估计会抓狂,该怎么处理呢? 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. ...

  4. Python开发的入门教程(八)-迭代

    介绍 本文主要介绍Python中迭代的基本知识和使用 什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Ite ...

  5. Namomo Cockfight Round 5

    AC代码 A. Number 假设\(n_i\)为十进制数\(n\)的第\(i\)位上的数字,那么\(\max_{i}n_i\)即为答案. B. Mod 用BFS的方法计算可以以\(O(p)\)的复杂 ...

  6. 跟着尚硅谷系统学习Docker-【day06】

    day06-20200720 p24.dockerfile案例编写-1   1.创建好容器时,进去容器的时候,修改所在的当前目录. 2.新添加命令.支持vim.ifconfig 备注:原来的镜像容器默 ...

  7. 一文看懂 YAML

    前言 YAML 并不是一种新奇的语言,YAML 首次发表于 2001 年,距离现在已经过去差不多 20 个年头.YAML 虽然不如 JSON.XML 之类的语言流行,应用也没有那么广泛,但是 YAML ...

  8. 十分钟快速入门 Python

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  9. python变量及简单数据类型

    python 目录 python 1.变量 1.变量的定义 2.变量的命名 3. 关键字 4.变量的命名规则 5.变量的类型 5.不同类型变量之间的计算 6.变量的输入 7.变量的格式化输出 8.格式 ...

  10. JVM运行时数据区--纵向补充--对象的实例化内存布局与访问定位

    对象的实例化 创建对象的方式 1.new:最常见的方式(本质是构造器) 变形1 : Xxx的静态方法 变形2 : XxBuilder/XxoxFactory的静态方法 2.Class的newInsta ...