移动端 关于 键盘将input 框 顶上去的解决思路---个人见解

在移动端，经常会遇到input获得焦点时候弹出的虚拟键盘将整体页面布局打乱的情况。 比如说是这种

输入框未获得焦点键盘未抬起的时候：

输入框获得焦点键盘抬起的时候

这种情况下，不管是上面的textarea还是下面的input输入框，它们任意一个获得焦点的时候，手机的虚拟键盘都会抬起将fixed定位于屏幕最低端的 “提交”按钮顶到屏幕 “中间”位置，严重影响布局，这就测试人员来看是一个不可饶恕，已经足已被开除的底部，怎么解决这个问题呢？对于布局不是很复杂的 "提交"页面而言，可以采用动态获取底部footer的offset().top 再减去其父元素offset().top ，将其差值当作footer的的margin-top数值的，同时remove掉footer的fixed属性。

具体的解决步骤如下：

  1. 将footer 外面包裹一个父级div,赋给其类名 footer-wrap，footer fixed绝对定位与屏幕的底部
  2. 分别获取footer和footer-wrap的offset().top,计算差值，remove掉footer的fixed属性，然后赋值给footer的margin-top

键盘抬起后，页面如下：

然后，这个问题就解决了，当然这是对于这种布局非常简单的页面而言，能够做到完美解决不留bug，但是对于更加复杂的页面是否也能过做到完美适配，还不得而知，望各位见谅，待到遇见了这种问题，本人再补充。、

时间： 2024-08-29 23:06:02

移动端 关于 键盘将input 框 顶上去的解决思路---个人见解的相关文章

Android软键盘弹出时把布局顶上去的解决方法

原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在mainfest.xml中,对那个Activity加: <activityandroid:name=".activity.HomeActivity"android:windowSoftInputMode="adjustPan|stateHidden"></ac

RecyclerView嵌套RecyclerView点击Item时顶上去的解决方法

RecyclerView嵌套RecyclerView点击Item时顶上去的原因是焦点抢占的原因,解决方法解决方法:holder.binding.rvContact.isFocusableInTouchMode = false (kotlin语法哦)注意:要在代码里面每次触发时设置,在xml里面一次性设置是无效的. 原文地址:https://www.cnblogs.com/yongfengnice/p/11445731.html

小程序键盘事件input框

<view class="serch"> <input type="text" name="search_input" bindconfirm="inputTyping" class="lf search_input search" focus="true" value="{{search_input_value}}" confirm-type=&q

android 弹起键盘把ui顶上去的解决办法

键盘输入框上面的ui布局必须为Relative相对布局.然后设置 <activityandroid:name=".activity.HomeActivity"Android:windowSoftInputMode="adjustPan|stateHidden"></activity>

android开发键盘把导航顶上去了解决办法

解决办法,在mainfest.xml中,在和导航条相关的Activity中加: <activity            android:name=".filing.AddFilingActivity"            android:windowSoftInputMode="adjustResize|stateHidden"             /> android:windowSoftInputMode="adjustResize

android开发ExpandableListView展开分组时不滚动不顶上去的解决方法

//给ExpandableListView设置分组点击事件binding.elvContactGroup.setOnGroupClickListener { parent, _, groupPosition, _ -> if (parent.isGroupExpanded(groupPosition)) { parent.collapseGroup(groupPosition) } else { parent.expandGroup(groupPosition, false)//第二个参数传递f

关于Android软键盘把布局顶上去的问题

首先说下我的需求:布局最上面是一个bar,有左上角返回按钮和标题,bar下面是一个ScrollView,里面有各种TextView和EditText, 点击下面的EditText时,不希望软键盘把bar给顶上去(看不见). 下面几点需要注意: 1.在AndroidManifest中相应的activity配置android:windowSoftInputMode="adjustResize|stateHidden",可以解决 2.但是出现了一个问题,在软键盘弹出的时,总会闪现黑色的背景.

底部菜单被输入法顶上去的解决方案

安卓手机输入法弹出,消失会触发 window.onresize事件,我们一般的解决方法是获取焦点,底部隐藏,失去焦点,底部菜单出现,但是,有些人会点击这个按钮收起键牌 那么,这个时候你的失去焦点无效,还有一种方法呢,是把position:fixed;改成position:absoult;这样底部菜单就不会顶上去,但是这种方法,经过我的实验,还是会被输入法顶上去,这两种方法都不要完全解决问题,还有一种是布局的问题,主页面:position:relative,底部菜单:position:absoul

当滚动列表的时候，让input框失去焦点（移动端会收起键盘）

1.拓展scroll.vue事件 1 beforeScroll:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 if(this.beforeScroll){//滚动列表的时候收起键盘(移动端) 8 this.scroll.on('beforeScrollStart',()=>{ 9 this.$emit('beforeScroll') 10 }) 11 } 2.在suggest.vue里声明beforeScrll:true,并$emit(beforeScr