解决弹出输入法时页面高度变小导致底部上浮的问题

浅浅的花香味﹌ 2022-09-24 12:14 192阅读 0赞

在有输入框的页面，当输入法弹出的时候，底部元素上浮遮盖了输入框，影响页面美观及功能。查找了一下，页面变窄是不可避免的。即使是设置绝对固定也是不可以的。因为webveiw在输入法弹出时候是变化（resize）的。关于document.body.clientheght, screen.height,plus.screen.resolutionHeight的相关区别及联系请查看这

所以要获取屏幕的高度，通过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";
                });

来源：http://www.cnblogs.com/phillyx/p/4528468.html

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android输入法弹出时界面被挤压的问题

android:windowSoftInputMode Activity 的主窗口与包含屏幕软键盘的窗口之间的交互方式。该属性的设置会影响两点内容： 1.当 Activi

左手的ㄟ右手/ 2022年12月31日 14:24/ 0 赞/ 360 阅读

相关 android 底部弹出输入框,Android编程：底部弹出输入框

Android编程：底部弹出的对话框环境：主机:WIN10 开发环境:Android Studio 2.2 Preview 3 说明：在《Android编程：底

╰+攻爆jí腚メ/ 2022年10月17日 11:21/ 0 赞/ 25 阅读

相关 android弹出输入法时将按钮向上顶,Android输入法弹出时把布局顶上去和登录按钮顶上去的解决方法...

背景：在写登录界面时，老板就觉得在输入密码的时候谈出来的输入法软键盘把登录按钮遮挡住了(入下图所示，不爽)，连输入框都被挡了一半，于是不满意了，要叫我改，于是我看QQ的登录效果

怼烎@/ 2022年10月17日 11:11/ 0 赞/ 455 阅读

相关解决弹出输入法时页面高度变小导致底部上浮的问题

在有输入框的页面，当输入法弹出的时候，底部元素上浮遮盖了输入框，影响页面美观及功能。查找了一下，页面变窄是不可避免的。即使是设置绝对固定也是不可以的。因为webveiw在输入法

浅浅的花香味﹌/ 2022年09月24日 12:14/ 0 赞/ 193 阅读

相关 EditText固定高度，光标在顶行，不弹出输入法

我们都知道当我们把EditText固定高度之后，默认情况下，它的光标会在中间，那我们如何让光标在顶行呢？很简单的.. “XML下android:gravity=

迷南。/ 2022年08月26日 12:24/ 0 赞/ 217 阅读

相关 Android判断输入法是否弹出

参考：https://blog.csdn.net/stwstw0123/article/details/47108337 root为所在布局文件的根布局的对象绑定

雨点打透心脏的1/2处/ 2022年05月22日 01:47/ 0 赞/ 167 阅读

相关底部弹出

项目中做了一个底部弹出，记录在此。 ![70][] ![70 1][] css： html, body \{ width: 100%; heig

傷城~/ 2022年05月21日 01:06/ 0 赞/ 286 阅读

相关小程序底部弹出框效果

问题描述：点击使用说明，弹出消息框，显示相关信息（1）wxml页面 <view class='explain' bindtap="show"> <te

淩亂°似流年/ 2022年05月15日 05:21/ 0 赞/ 545 阅读

相关页面点击出现文字上浮

偶然间浏览博客园看到点击出现文字效果于是打开控制台看了看鼠标单击事件核心代码如下 <script type="text/javascript">

落日映苍穹つ/ 2022年04月02日 17:58/ 0 赞/ 236 阅读

相关阻止EditText弹出输入法

阻止EditText弹出输入法 //EditText有焦点阻止输入法弹出 editText.setOnTouchListener(new OnTouchListene

水深无声/ 2022年03月19日 09:13/ 0 赞/ 231 阅读