移动端键盘弹起导致底部按钮上浮解决方案

问题描述：移动端页面输入框聚焦伴随着键盘弹起，底部icon浮到键盘上方，导致样式不友好

解决思路：在键盘弹起时，不让原本固定在底部的icon自动浮起。监听屏幕的实时高度，控制底部按钮的显示与否，从而达到按钮固定在底部的效果。

解决方案（本例是在vue框架下实现的解决方案代码）：

html:

<div class="login-content-footer" v-if="heightChange">

<img

src="../../assets/images/login-wxLogin.png" alt="" class="login-content-footer-wxLogin" @click="wxLogin" v-show="WxFlag">

<img src="../../assets/images/personal-footer.png" class="login-content-footer-img">

</div>

data部分:

data () {

return {

heightChange: true,

docmHeight: document.documentElement.clientHeight, //默认屏幕高度

showHeight: document.documentElement.clientHeight, //实时屏幕高度

}

监听屏幕实时高度：　　

watch:{

showHeight() {

if (this.docmHeight > this.showHeight) {

this.heightChange = false;

} else {

this.heightChange = true;

}

},

}

mounted周期:

mounted() {

// window.onresize监听页面高度的变化

window.onresize = () => (() => {

this.showHeight = document.body.clientHeight;

})();

},　

结果：

Android手机键盘弹起时实时屏幕高度会改变，但是苹果手机无论是默认输入法还是安装的其他输入法，键盘弹出的高度不会改变，但是庆幸的是大部分ios已经支持了fixed属性

还发现一个小的bug就是苹果手机点击输入框时偶尔会闪现一个icon,通过给父元素加入position:relative和足够的padding-bottom解决了，之后我发现可以用position:absolute定位父元素给position:relative和足够的padding-bottom能达到同样的效果^_^

转载于:https://www.cnblogs.com/shuihanxiao/p/10642179.html

移动端键盘弹起导致底部按钮上浮解决方案相关推荐

如何解决移动端键盘弹起将底部导航栏顶起
一行代码搞定 /*输入键盘弹起,底部导航栏消失*/ var bottomEl = document.querySelector('footer'); // 可见区域高度减去元素的高度 bottomEl ...
移动端键盘弹起底部固定模块会被顶上去
问题:键盘弹起将底部按钮顶上去遮住输入框解决思路:实时监听窗口高度与初始高度比较,判断键盘是否弹起,弹起隐藏底部否则显示底部 /vue/ <div class='footer' v-show= ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...
移动端软键盘弹起遮挡输入框问题的解决方案
移动端软键盘弹起遮挡输入框问题的解决方案 1.背景原生app与H5页面混合开发时,input输入框唤起软键盘时,输入框被遮挡,分为两种情况: 客户端设置了windowSoftInputMode =& ...
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
解决Flutter键盘弹起导致与输入框有间距问题（Flutter键盘弹起Scaffold布局流程）解析
一. 在项目中遇到了个如下问题: 当页面底部有个输入框,点击弹出键盘时:输入框与键盘之间有一段间距通过排除,最后找到了问题根源所在:原因是使用了这个屏幕适配框架导致的.此框架通过直接修改Flutte ...
移动端键盘输入框把底部元素顶上去了_关于input调用移动端键盘的问题
题记 ------觉得自己做得到和做不到,其实只在一念之间. 每天站在高楼上,看着地上的小蚂蚁,他们的头很大,腿很细.他们拿着苹果手机,他们穿着耐克阿迪,上班就要迟到了,他们很着急.最近发生了滴滴事件 ...
百度浏览器屏蔽H5固定在底部按钮之解决方案
最近在做一个活动页的时候遇到一个奇怪的问题,活动页底部固定一个按钮,但是在百度浏览器打开时按钮一闪不见,而只有百度浏览器会这样. 查询资料发现,这是百度浏览器的广告屏蔽机制,会让这种固定定位在底部的元 ...
Flutter 中键盘弹起时，Scaffold 发生了什么变化
最近刚好有网友咨询一个问题,那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时,Scaffold 的内部发生了什么变化,让大家更好理解 Flutter 中的输入键盘和 Scaffold ...

移动端键盘弹起导致底部按钮上浮解决方案

移动端键盘弹起导致底部按钮上浮解决方案相关推荐

最新文章

热门文章