问题:在使用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. openCV - 5~7 图像混合、调整图像亮度与对比度、绘制形状与文字

    5. 图像混合 理论-线性混合操作.相关API(addWeighted) 理论-线性混合操作 用到的公式 (其中 α 的取值范围为0~1之间) 相关API(addWeighted) 参数1:输入图像M ...

  2. 你可能不了解的java枚举

    枚举在java里也算个老生长谈的内容了,每当遇到一组需要类举的数据时我们都会自然而然地使用枚举类型: public enum Color { RED, GREEN, BLUE, YELLOW; pub ...

  3. Python数据清洗:提取爬虫文本中的电话号码

    步骤索引 效果展示 注意事项 代码 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识. ...

  4. MySQL 日期时间类型怎么选?千万不要乱用!

    构建数据库写程序避免不了使用日期和时间,对于数据库来说,有多种日期时间字段可供选择,如 timestamp 和 datetime 以及使用 int 来存储 unix timestamp. 不仅新手,包 ...

  5. String字符串的最大长度是多少?

    在学习和开发过程中,我们经常会讨论 short ,int 和 long 这些基本数据类型的取值范围,但是对于 String 类型我们好像很少注意它的"取值范围".那么对于 Stri ...

  6. 没事也来配一个logback

    工程下载:https://files.cnblogs.com/files/xiandedanteng/logbackCfg20200115.zip 首先创建一个maven项目,pom.xml如下书写: ...

  7. leetcode刷题-89格雷编码

    题目 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异. 给定一个代表编码总位数的非负整数 n,打印其格雷编码序列.即使有多个不同答案,你也只需要返回其中一种. 格雷编码序列 ...

  8. CentOS如何设置IP连接网络

    1.登录系统,进入:cd /etc/sysconfig/network-scripts 目录下,如下图: 找到 ifcfg-ens33(文件) 第二步:使用vi编辑器打开ifcfg-ens33文件,使 ...

  9. Spring AOP-用代理代替繁琐逻辑

    Spring AOP 基础概念 AOP 是一种面向切面的编程思想,通俗来讲,这里假如我们有多个方法. @Component public class Demo { public void say1() ...

  10. Proxy使用详解

    文档:Proxy 基本使用就不赘述,看文档即可 通用 1.Proxy可以包装任何形式的对象:包括原生数组,函数,甚至另一个代理 2.代理实例中没有指定的handler,实际就是操作原对象target: ...