首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

手机软键盘弹起导致页面变形的一种解决方案

最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了,布局全被打乱...原来的样子: image.png 软键盘弹出来后: ? 在开发APP时,通常情况下页面的宽度和高度都会设为 100%,即页面高度等于屏幕高度,页面宽度等于屏幕宽度。...当 input 获取焦点时,软键盘弹出,页面高度被挤压,此时页面高度 = 屏幕高度 - 软键盘高度。所以,页面高度缩小,元素都挤压在一起,布局被打乱。...软键盘还是会弹起,因为页面最小高度被设为了 768px,所以此时总高度为 768px + 软键盘高度,超出了屏幕高度(ipad横屏屏幕高度为768px)。...等输入完,软键盘收起时,页面恢复原状。 ipad 的问题解决了,要是 APP 运行在其他手机端上呢?此时,CSS3 @media 属性就排上用场了。

2.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    自适应软键盘的Dialog以及监听软键盘弹起

    Dialog的布局要适应软键盘的弹起2. 软键盘弹起和收下的时候都会有不同的引导,所以要在Dialog上监听软键盘的弹起。 需求的解决: 一:适应键盘的弹起。...,主要是对软键盘操作的,主要有以下属性: stateUnspecified:软键盘的状态并没有指定,系统将选择一个合适的状态或依赖于主题的设置 stateUnchanged:当这个activity出现时...,软键盘将一直保持在上一个activity里的状态,无论是隐藏还是显示 stateHidden:用户选择activity时,软键盘总是被隐藏 stateAlwaysHidden:当该Activity主窗口获取焦点时...,软键盘也总是被隐藏的 stateVisible:软键盘通常是可见的 stateAlwaysVisible:用户选择activity时,软键盘总是显示的状态 adjustUnspecified:默认设置...其实,在清单中配置的属性本质也是告诉当前界面对软键盘这种情况的处理。

    3.5K30

    Flutter软键盘原理

    Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。当这个值为true的时候,页面会进行重新布局。...view.requestFocus(); mImm.showSoftInput(view, 0); } 在Android 端,最后是调用 InputMethodManager 来打开软键盘...return insets.getSystemWindowInsetBottom(); } } 这里我们可以看到,在 Android 端,软键盘的高度在底部栏可见的时候取的就是系统 window...当判断是软键盘后,会通过刷新 ViewportMetrics 来触发页面重绘: // FlutterView private void updateViewportMetrics() { if (!..._onMetricsChangedZone); } 经过上面的理论分析,我们可以得出结论,Flutter 软键盘的高度变化体现在 metrics 的变化。

    1.5K10

    详解Android中获取软键盘状态和软键盘高度

    详解Android中获取软键盘状态和软键盘高度 应用场景 在Android应用中有时会需要获取软键盘的状态(即软键盘是显示还是隐藏)和软键盘的高度。这里列举了一些可能的应用场景。...所以并不能通过isActive()方法来判断软键盘究竟是显示还是隐藏的。要想获取软键盘的状态和软键盘的高度,只能通过间接方法实现。...当软键盘显示时,窗口的可见区域大小会被压缩,当软键盘隐藏时,窗口的可见区域大小会还原。...监听软键盘的状态变化 在获取到软键盘的状态和高度后就可以执行需要的操作了。如重新布局按钮位置,设置变量,记录当前软键盘状态和上次软键盘隐藏时间等。...这时在可以自行定义一个接口,在主Activity中对软键盘状态变化进行监听,其他对软键盘状态感兴趣的类,向主Activity中注册软键盘状态变化监听。

    2.8K20

    RPA与软键盘

    以下就针对银行软键盘的几种类型进行讨论,并给出已证明可行的几种解决方案。 1. 有软键盘,并可以通过HTML元素定位到字符位置 如中国建设银行 ?...如下代码: "<webctrl aaname='"+item.ToString+"' parentid='keybordkeyboardBtn...有<em>软键盘</em>,但是也可以不使用<em>软键盘</em>输入 如重庆银行 ? 重庆银行在密码输入时,既可以用<em>软键盘</em>输入,也可以使用键盘输入。...但是如果使用<em>软键盘</em>输入时,它不想建行那样,可以通过<em>HTML</em>元素来定位字符,所以还需要寻找其他方式解决,但既然它可以直接通过键盘输入,那么在实施RPA的时候,完全可以直接通过type into控件来实现输入...有<em>软键盘</em>,并且使用<em>软键盘</em>输入密码 如重庆银行 ?

    1.4K60

    Android 软键盘的那些事

    这个属性能影响两件事情: 【一】当有焦点产生时,软键盘是隐藏还是显示 【二】是否减少活动主窗口大小以便腾出空间放软键盘 它的设置必须是下面列表中的一个值,或一个”state…”值加一个”adjust…”...:用户选择activity时,软键盘总是被隐藏 【D】stateAlwaysHidden:当该Activity主窗口获取焦点时,软键盘也总是被隐藏的 【E】stateVisible:软键盘通常是可见的...2> 活动的主窗口调整——是否减少活动主窗口大小以便腾出空间放软键盘或是否当活动窗口的部分被软键盘覆盖时它的内容的当前焦点是可见的。..."stateVisible" 当用户导航到Activity主窗口时,软键盘是可见的。不过当用户离开一个Activity而导致另一个被覆盖的Activity显示出来时,软键盘会使用默认的设置。..."adjustResize" 该Activity主窗口总是被调整屏幕的大小以便留出软键盘的空间 "adjustPan" 该Activity主窗口并不调整屏幕的大小以便留出软键盘的空间。

    2K10

    Android 软键盘遮挡解决

    前言:在开发过程中难免会遇到在软键盘遮挡输入框的问题,今天来整理一下。...软键盘弹出 ? 解决问题后 解决思路: ? 思路 我们要做的就是在软键盘弹出后显示的位置为空白区域,不超过内容区域,也就是登录按钮一下。...有小伙伴提问了,除非空白区域和软键盘一样大小,如果软键盘区域大于空白区域那岂不是还有覆盖吗?对的。  那有什么解决方式吗? 答:内容区域向上移动即可。   如何知道内容区域向上移动多少呢?...首先我们是有办法获取内容区域的大小也就是高的(代码中体现),然后屏幕的高减去内容区域的高就是软键盘的高度,知道了软键盘的高度(软键盘的高度无法改变,那么只好调整内容区域距离顶部的margintop值了,...activity为loginActivity activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(rect); //这就是软键盘的高度

    3.9K40

    实现Android键盘的中英文适配

    3、设置软键盘交互样式 有时键盘弹出需要把界面挤压到上端或直接覆盖界面。...,系统将选择一个合适的状态或依赖于主题的设置 【B】stateUnchanged:当这个activity出现时,软键盘将一直保持在上一个activity里的状态,无论是隐藏还是显示 【C】stateHidden...:用户选择activity时,软键盘总是被隐藏 【D】stateAlwaysHidden:当该Activity主窗口获取焦点时,软键盘也总是被隐藏的 【E】stateVisible:软键盘通常是可见的...【F】stateAlwaysVisible:用户选择activity时,软键盘总是显示的状态 【G】adjustUnspecified:默认设置,通常由系统自行决定是隐藏还是显示 【H】adjustResize...:该Activity总是调整屏幕的大小以便留出软键盘的空间 【I】adjustPan:当前窗口的内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容的部分 EditText默认不弹出软件键盘

    2.2K10
    领券