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" 此举可在软键盘弹出时,重新测量布局,保证不遮挡光标的所在位置. ...
随机推荐
- Maven快速入门(四)Maven中的pom.xml文件详解
上一章,我们讲了Maven的坐标和仓库的概念,介绍了Maven是怎么通过坐标找到依赖的jar包的.同时也介绍了Maven的中央仓库.本地仓库.私服等概念及其作用.这些东西都是Maven最基本.最核心的 ...
- node.js的安装及其相关环境变量的配置
笔者最近一直重置电脑,本来想换台mac,想了想还是加下配置吧. 于是慢慢的一直会去安装node 接下来进入教程环节 一.NodeJS下载 1.下载NodeJS安装包下载地址:NodeJS下载 2.开始 ...
- Roads in the North (树的直径)
Building and maintaining roads among communities in the far North is an expensive business. With thi ...
- HTML语言基本单词与css基本单词
DOCTYPE 文档 html 网页 head 头部 body 主体 title 题目 p 段落 color 颜色 style 样式 backgroun ...
- 07vue 自定义全局组件 通用流程
1.全局组件的目录 2.loading/index.js import LoadingComp from './Loaiding' const compName=LoadingComp.name // ...
- Python学习—Anaconda详细 下载、安装与使用,以及如何创建虚拟环境,不仅仅只有安装步骤哦
上一期我们介绍了Python.Pycharm.Anaconda三者之间的关系以及使用,这一期主要详细介绍如何在Windows上下载和安装工具Anaconda,然后使用其自带的conda管理不同项目的虚 ...
- python appium app ui 自动化
1.下载Android-SDK.夜神安卓模拟器.Appium.adb命令执行包并配置环境变量 2.打开夜神 3.打开Appium进行配置,配置如下 4.启动命令,到夜神bin目录下执行 adb con ...
- [06] 优化C#服务器的思路和工具的使用
优化C#服务器的思路和工具的使用 优化服务器之前, 需要先对问题的规模做合理的预估, 然后对关键的数据做采样, 做对比, 看和自己的预估是否一致, 误差大在什么地方, 是预估的不对, 还是系统实现有问 ...
- JavaScript中常用的数据输出方式解析
在js中,一般使用如下几种方式进行数据的输出: 1. 在浏览器的控制台输出 浏览器F12打开浏览器控制台(一般前端开发人员必备浏览器为谷歌浏览器,下面就以谷歌浏览器为例对控制台尽心解析): 1.1 E ...
- Fork Join 并发任务执行框架
Fork Join 体现了分而治之 什么是分而治之? 规模为N的问题,如果N<阈值,直接解决,N>阈值,将N分解为K个小规模子问题,子问题互相对立,与原问题形式相同,将子问题的解合并得到原 ...