问题:在使用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. 数字电路基础(二)TTL与非门输入端悬空和接大电阻的问题

    引言 我们在做那些判断与非门输入输出的时候,常常把输入端悬空和接大电阻作为高电平输入处理,比如下边这一例题: 很显然,我们无法直接从与非门逻辑图中看出其内部工作原理,那我们该如何分析呢?那肯定是去分析 ...

  2. 关于前端Ajaxc传FormData后台如何接收转base64

    前端是Jquery的ajax,后台是C#MVC,代码如下: <------前端-----> var formData = new FormData(); formData.append(& ...

  3. Codeforces 1337C Linova and Kingdom

    题意 给你一颗有根树,你要选择\(k\)个点,最大化\(\sum_{i \in S} val_i\),其中\(S\)是被选点的集合,\(val_i\)等于节点\(i\)到根的路径上未被选择点的个数. ...

  4. Robot Framework自动化测试框架核心指南-如何做好自动化测试平台框架的设计

    自动化测试如果需要能高效快速的支撑软件项目的测试,项目的快速迭代以及上线,除了以上我们介绍的需要许多的Lib来支持以及需要高效的去编写自动化测试案例外,还需要一个好的自动化测试框架平台来支撑我们的自动 ...

  5. Java网络通信 —— 序列化问题

    Java序列化的目的主要有两个: 1.网络传输 2.对象持久化 当选行远程跨迸程服务调用时,需要把被传输的Java对象编码为字节数组或者ByteBuffer对象.而当远程服务读取到ByteBuffer ...

  6. hadoop不能互相访问和linux防火墙守护进程

    前言——作为装过几次集群的菜鸟,对于hadoop集群的安装还是比较有心得的:只要配置文件够好,集群配置就非常容易,否则也容易出现莫名其妙的问题!总结了一份3台机器搭建较完好的集群的一份配置文件. 在我 ...

  7. eleLogger主题评论区(反馈与建议)

    // run $('#blog_post_info, #BlogPostCategory, #post_next_prev, #blog_post_info_block').remove() $('# ...

  8. 故事:坐在我隔壁的小王问我什么是HyperLogLog

    1 最近坐我隔壁的小王同志,心情真是糟透了.不但工作不顺心,被老板狠狠的批了一顿,连女朋友也跟别人跑了(Y 的让你天天在我面前秀). 真是不可谓不惨,我都快要同情他了. 看着他萎靡又迷离的眼神,我实在 ...

  9. DataStax Bulk Loader教程(一)

    DataStax Bulk Loader - dsbulk是在DSE 6 引入的一种新的批量加载方法.(点击这里下载DataStax Bulk Loader). 它提供了将数据加载(load)到Dat ...

  10. Linux中逻辑卷(LV)的创建、增大和减小

    首先说一下在缩小逻辑卷的时候要注意的问题:第一步使用resize2fs命令更改文件系统的容量:第二步使用lvreduce命令减小逻辑卷的容量.这两个顺序千万不要搞反了,而且要保证缩减后的逻辑卷容量大于 ...