在移动端，经常会遇到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，但是对于更加复杂的页面是否也能过做到完美适配，还不得而知，望各位见谅，待到遇见了这种问题，本人再补充。、

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

  1. Vue 在手机上键盘把底部菜单顶上去的解决方案

    Vue 在手机上键盘把底部菜单顶上去的解决方案 ios和安卓的键盘的区别 ios和安卓的键盘的区别弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜 ...

  2. js－移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

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

    原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...

  4. input框的默认bug解决办法

    input框的默认bug是在没干掉边框的情况下是不能设置背景颜色的,否则边框会变成内边框(黑色)效果,很难看. 解决办法是: none掉input框的边框:border:none; 再设置其背景色为任 ...

  5. angularJS批量删除 品优购删除品牌（通用复选框批量选中删除解决思路）

    思路: 一步:在点击复选框时维护变量数组 在js中定义一个数组变量, 给复选框添加点击动作, 在动作中判断当前复选框是否为选中状态(即点击后复选框的是否选中状态), 若为选中状态,则向数组中添加选中的 ...

  6. 安卓input框获取焦点时，底部按钮会顶上去的解决方法

    var h = document.body.scrollHeight;window.onresize = function(){ if (document.body.scrollHeight < ...

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

    键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity            android:name=& ...

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

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

  9. ios 软键盘弹出布局被顶上去 已解决

          document.body.addEventListener('focusout', () => {             //软键盘收起的事件处理             set ...

随机推荐

  1. Suse Linux下NTP缓慢调整配置，转载至http://www.gpstime.com.cn/

    (1)系统内若有使用crontab 进行与时间调整相关的例行性工作排程,应注释掉(命令人工crontab -e修改,删除定时同步任务ntpdate -s ntpserver). (2)修改ntp配置文 ...

  2. Java容器概述

    如果一个程序只包含固定数量的且其生命期都是己知的对象． 那么这是一个非常简单的程序. 通常,程序总是根据运行时才知道的某些条件去创建新对象.在此之前,不会知道所需对象的数量,甚至不知道确切的类型.为解 ...

  3. Spring学习－理解IOC和依赖注入

    最近刚买了一本介绍ssm框架的书,里面主要对Mybatis.spring.springmvc和redis做了很多的讲解,个人觉得虽然有的内容我看不懂,但是整体上还是不错的.最近正在学习中,一边学习一边 ...

  4. MongoDB权威指南--笔记

    mongodb并不具备一些在关系型数据库中很普遍的功能,如连接和复杂的多行事务. 集合-->文档-->id id在文档所属的集合中是唯一的. db.help()查看数据库级别的帮助,db. ...

  5. Zookeeper（二）Zookeeper原理与API应用

    一 Zookeeper概述 1.1 概述 Zookeeper是Google的Chubby一个开源的实现.它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.名字服务. 分布式同步.组服 ...

  6. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

  7. Java虚拟机四：垃圾回收算法与垃圾收集器

    在Java运行时的几个数据区域中,程序计数器,虚拟机栈,本地方法栈3个区域随着线程而生,随线程而灭,因此这几个区域的内存分配和回收具有确定性,不需要过多考虑垃圾回收问题,因为方法结束或者线程结束时,内 ...

  8. vim编码相关

    与vim编码相关的四个配置: encoding:vim核心编码,所有vim交换区,信息提示区都用这个编码.打开文件的编码如果是其他编码,会自动转换为核心编码,保存时再转回文件编码. fileencod ...

  9. powershell 性能测试小脚本

    powershell 性能测试: 转载请注明: 仰望高端玩家的小清新 http://www.cnblogs.com/luruiyuan/ 1. 将待测试的脚本封装在代码块中 2. 使用  Get-Ch ...

  10. 变量的解构赋值--ES6

    1. 数组的解构赋值 基本用法 let [a, b, c] = [1, 2, 3]; let [a,,c] = [1,2,3]; let [a,...b] = [1,2,3]; // a=1; b=[ ...