问题:在使用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. 揭秘日活千万腾讯会议全量云原生化上TKE技术实践

    腾讯会议,一款联合国都Pick的线上会议解决方案,提供完美会议品质和灵活协作空间,广泛应用在政府.医疗.教育.企业等各个行业.大家从文章8天扩容100万核,腾讯会议是如何做到的?都知道腾讯会议背后的计 ...

  2. Docker 部署 redis教程,附带部分小建议,防止踩坑

    Docker 部署 redis,附带部分小建议,防止踩坑 跟所有人一样,我们先从docker基本命令开始 一.拉取redis镜像(配图来自菜鸟,其实截图没多大意义,对比看下) # 默认就拉取laste ...

  3. ORA-01804报错

    报错Error while trying to retrieve text for error ORA-01804 环境变量有配https://blog.csdn.net/zklth/article/ ...

  4. C++ Templates (2.2 使用Stack类模板 Use of Class Template Stack )

    返回完整目录 目录 2.2 使用Stack类模板 Use of Class Template Stack 2.2 使用Stack类模板 Use of Class Template Stack 在C++ ...

  5. 为什么 list(range) 比 [i for i in range()] 快?

    为什么 list(range) 比 [i for i in range()] 快? t0 = time.time() list(range(100000)) print(time.time()-t0) ...

  6. jinja2快速实现自定义的robotframework的测试报告

    一.背景 RF的结果报告可以方便我们查看每一条用例集.用例的执行结果统计,但是有的项目涉及到一些数据的比对,希望能够直观到看到数据,原生的测试报告就无法满足这个需求了. 原生的报告 项目需求报告格式 ...

  7. 安装与激活PhpStrom

    1.下载安装PHPstorm(https://pan.baidu.com/s/1nwK3ew5 密码dhtr) 2.运行 3.下一步选择中间,在http://idea.lanyus.com/ 上获取激 ...

  8. intellij idea 无法进行调试的解决方案

    inteliij idea 如果出现无法调试该怎样做?debug中各功能为灰色. 如果你用的是外来项目,可能是没有添加这个项目自带的library: 解决办法: 在file->project  ...

  9. Java清空一个指定文件

    清空test.log文件所有内容 File log = new File("c:\\test\\test.log"); FileWriter fileWriter =new Fil ...

  10. oracle之同义词

    同义词 从字面上理解就是别名的意思,和视图的功能类似.就是一种映射关系. 14.1 私有同义词; 一般是普通用户自己建立的同义词,创建者需要create synonym 权限. sys:SQL> ...