使用MUI 软键盘弹起挤压页面
来源:互联网 发布:sql server2008和2016 编辑:程序博客网 时间:2024/04/29 14:19
在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况。当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面、软键盘遮挡输入框等一系列问题;
1. 单页面 软键盘弹起挤压页面
如上图所示:当页面中的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 }); }}
单页面软键盘弹起挤压页面的问题 Demo下载
2. 底部导航栏被挤压上去的问题
如图所示,当子页面中的input获取焦点的时候,父页面的底部导航栏被弹起;
原因:当子页面中存在input获取焦点,窗口的底部会弹出软键盘,软键盘弹出的时候,会挤压父页面,子页面绝对定位在窗口底部的导航栏就会被挤压,给人的感觉就是底部导航被顶起;
解决办法:根单页面的按钮被弹起的解决办法类似,不过在这里需要监听的是父页面的高度,当软键盘弹起父页面被挤压时候,子页面也被挤压,所以在手动修改父页面的高度的时候,也需要手动修改子页面的高度;
var height = document.documentElement.clientHeight || document.body.clientHeight;window.onresize = function() { var heightView = document.documentElement.clientHeight || document.body.clientHeight; if(heightView < height) { plus.webview.currentWebview().setStyle({ height: height }); //修改父页面高度的时候,也要修改子页面的高度 因为子页面距离父页面底部始终是51px 所以这里只需要用父页面的高度减去51px,就是子页面的高度 plus.webview.getWebviewById('HTML/a.html').setStyle({height: (height*1-51)}); }}
弹出软键盘,底部导航栏被挤压 Demo下载
软键盘弹挤压窗口的情况只会在安卓上出现,因为IOS上的软键盘是直接覆盖窗口的最上层,不会挤压窗口;
- 使用MUI 软键盘弹起挤压页面
- 弹出软键盘挤压上一个activity页面变形
- 安卓软键盘弹起时想向上平移布局但布局却被挤压得解决办法
- 监听软键盘 弹起 关闭
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
- 软键盘弹出挤压画面的问题
- 软键盘挤压UI界面问题
- 软键盘弹出挤压界面的问题
- 软键盘挤压布局的问题
- 检测软键盘的弹起与隐藏
- 监听软键盘的弹起与隐藏
- android检测软键盘是否弹起
- Android 软键盘弹起隐藏的监听
- 检测软键盘的弹起与隐藏
- android 软键盘弹起监听事件
- 监听手机软键盘弹起与关闭
- Android监听软键盘弹起+收回
- 监听软键盘的弹起和收起
- jQuery中的extend函数
- Java的JIT编译优化技术
- kettle 读取表数据设置成变量
- Hamburgers [CF-371C]
- IC设计基础系列之低功耗篇6:(数字IC)低功耗设计入门(六)——门级电路低功耗设计优化
- 使用MUI 软键盘弹起挤压页面
- mybatis批量删除
- MongoDB教程之聚合(count、distinct和group)
- 持续集成篇-- SonarQube代码质量管理平台的配置与使用
- 清除wnTKYg 这个挖矿工木马的过程讲述
- 操作系统服务:logging日志记录模块
- Liferay Portal 主题开发让项目的样式更加随心所欲 (五)
- arduino 控制8*8点阵
- robot ride使用jquery定位元素