MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题
解决弹出输入法时页面高度变小导致底部上浮的问题##
在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能。查找了一下,页面变窄是不可避免的。即使是设置绝对固定也是不可以的。因为webveiw在输入法弹出时候是变化(resize)的。关于document.body.clientheght, screen.height,plus.screen.resolutionHeight的相关区别及联系请查看这
深入理解高度。获取屏幕、webview、软键盘高度
http://www.cnblogs.com/phillyx/
所以要获取屏幕的高度,通过js给一个固定的top
<nav class="mui-bar mui-bar-tab" id='bottomx'>
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
mui.plusReady(function() {
//设置bottom绝对位置
document.getElementById('bottomx').style.top = (plus.display.resolutionHeight - 50) + "px";
});
MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题的更多相关文章
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- Android实现弹出输入法时,顶部固定,中间部分上移的效果
前言 最近做项目时碰到一个问题,在意见反馈里面,提交按钮写到顶部,当用户输入反馈意见或者邮箱手机号时,弹出的输入法会上移整个页面,导致提交按钮显示不了. 很明显,这样的界面是非常不友好的,找了一些资料 ...
- Android中PopupWindow中有输入框时无法弹出输入法的解决办法
PopupWindow window=new PopupWindow(view, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); //必须让p ...
- IOS微信点击input弹出输入法,关闭后页面留白解决方案
场景:IOS用微信点击input框弹出输入法后 不管你是输入信息,还是不输入直接点完成关闭输入法,都会导致页面被挤上去后产生留白,从而改变页面布局 解决方法: 给input添加 ...
- ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...
- JQuery弹出菜单时禁止页面(body)滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
- 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题
最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...
- mui弹出输入法遮住input表单元素
转自https://www.cnblogs.com/devilyouwei/p/6293190.html mui弹出输入法遮住input表单元素 问题如下:当我用mui开发app时,在mui-sc ...
- jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题
这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...
随机推荐
- Windows 常用工具 & 开发工具 & Chrome插件 & Firefox 插件 & 办公软件
常用工具 1.FastStone 8.0 2.印象笔记 3.Chrome 4.Beyond Compare 5.Everything 6.有道词典 7.文本编辑软件 EditPlus UltraEdi ...
- 3.appium定位方法
1.使用id定位: driver.find_element_by_id('id的名称').click() 2.使用className定位: driver.find_element_by_class_n ...
- curl下载安装与使用
下载: https://curl.haxx.se/download.html 安装: 二进制安装.即解压即可. 使用 1.获取页面内容. 不加任何参数时,默认会发送GET请求来获取url内容到标准输出 ...
- falsh 遮住div 解决方案
1.修改代码 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http ...
- JavaScript也是黑客技术?
JavaScript 超级 BUG!多款 x86/ARM 处理器瞬间遭破解 https://www.oschina.net/news/82108/javascript-bug-cause-cpu-as ...
- 2019.9.24 csp-s模拟测试51(a) 反思总结
T1:还在头铁,顺便复习了一下lct[虽然这题用不上因为复杂度不对] 头铁结束. 虽然题目存在换根的操作,实际上并不用真的换根. 2操作中求lca的时候只要考虑原树上root和x.y的lca以及x,y ...
- ADSL pppoe 拔号工具rp-pppoe
rp-pppoe 目前在各大发行版本都是存在的,比如Redhat/Fedora.红旗.Slackware.Debian.SuSE等系统,都是采用这个拔号软件,所以您大可不必为下载源码编译安装.只需要在 ...
- Leetcode605.Can Place Flowers种花问题
假设你有一个很长的花坛,一部分地块种植了花,另一部分却没有.可是,花卉不能种植在相邻的地块上,它们会争夺水源,两者都会死去. 给定一个花坛(表示为一个数组包含0和1,其中0表示没种植花,1表示种植了花 ...
- 低价替代Vector CANoe CAN总线适配解决方案支持所有USBCAN(周立功CAN、PCAN、Kvaser、ValueCAN、NI CAN)
在汽车通信领域CAN总线使用非常广泛,最强大的工具有Vector Case(10WRMB).Pcan(2KRMB),ZLGCAN(1.5KRMB),KVASER(2KRMB).ValueCAN(4KR ...
- Django用户名密码错误提示
from django.shortcuts import render # Create your views here. from django.shortcuts import render fr ...