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 });
}
}
Layman 解决MUI 软键盘弹起挤压页面问题的更多相关文章
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱
最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...
- 解决react-native软键盘弹出挡住输入框的问题
解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况.用了RN官方的KeyboardAvoidingView组件,会有多出 ...
- android全屏下的输入框未跟随软键盘弹起问题
最近开发中遇到,全屏模式下输入框在底部不会跟随软键盘弹起.于是网上搜索了解决的方案.大致找到了两种方案. 第一种 定义好此类 public class SoftKeyBoardListener { p ...
- H5软键盘弹起收回(IOS与Android)
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
- Android之监听手机软键盘弹起与关闭
背景: 在很多App开发过程中需要在Activity中监听Android设备的软键盘弹起与关闭,但是Android似乎没有提供相关的的监听API给我们来调用,本文提供了一个可行的办法来监听软键盘的弹起 ...
- uni-app 在input获取焦点(弹出软键盘后收起软键盘),页面不下滑,留下下方空白
加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });
- h5 移动端 监听软键盘弹起、收起
前面一篇博客 h5 安卓 键盘弹起界面适配 修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化window.onresize事件来做突破点的,但是io ...
- 使用WebView时软键盘遮挡H5页面解决办法
简单解决办法:在清单文件中添加 android:windowSoftInputMode="adjustResize" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...
随机推荐
- Selenium中核心属性以及方法
一.操作定位元素 selenium提供了定位元素的API,这些方法都被定义在webDriver类中,需要以find开头, 例如:find_Element_by_id('')
- Photon PUN 一 介绍
有句话说的好 , 官网永远是最好的学习地方 . 虽然国内的资料不多 , 但是官网的资料还是很充足 , 这就带着英汉词典就着作阅读理解的劲头去官网学习吧 https://doc.photonengine ...
- Namomo Cockfight Round 5
AC代码 A. Number 假设\(n_i\)为十进制数\(n\)的第\(i\)位上的数字,那么\(\max_{i}n_i\)即为答案. B. Mod 用BFS的方法计算可以以\(O(p)\)的复杂 ...
- BootStrap-select插件动态添加option无法显示
问题描述: 在使用bootstrap-select插件时出现下拉框无法显示动态追加的option,经过查看element元素发现,select标签已经append进去了所需的option选项,但是页面 ...
- 在react项目添加看板娘(react-live2d)
有留意到看板娘这么个东西,简直就是我们程序员+动漫迷的挚爱.但是回观网上,大多只是在老旧的html的静态引入.vue甚至也有几个不怎么维护的,还是老旧的不行的SDK2.X的版本.这这这这!我们的rea ...
- 小程序开发-使用xpath解析网页html中的数据
最新有个微信小程序的开发需求,需要从网页中提取一些元素信息,获取有效数据 1. 了解到微信小程序里面不能直接操作dom元素,所以我们需要使用一些其他的npm包 2. 经过查到各方面的文档,最新决定用x ...
- flutter vscode 安卓打包apk文件
配置 VSCode默认是没有使用密钥签名的,往往我们在正式项目中是需要签名的.那就创建好了...所以需要自己创建并使用密钥签名 步骤一 创建密钥库 执行以下命令: keytool -genkey -v ...
- DevOps-实践心得
基于最近几年从事与DevOps的相关实践,对这篇文章的观点深有体会,所以记录在这里.加粗部分是我比较深有体会的,但是对于最后作者对于"运维"有些悲观,我有点不敢苟同,反而对于运维的 ...
- mysql修改默认数据存储路径
1.先关闭mysql服务 可cmd--services.msc进入关闭服务 或cmd命令输入net stop mysql57关闭服务 2.进入C:\ProgramData\MySQL\MySQL Se ...
- python3 while循环
python不支持n++这样格式,因为python中变量不像c那样事先定义好变量类型,在内存中开辟指定的空间,然后赋值. python中以字符串为例,事先在内存划分空间来存放字符串,然后用变量名来指向 ...