手机H5页面当input输入框获取焦点时，软键盘会弹起，这时：IOS底部固定定位的按钮不会随着键盘弹起而弹起；而安卓底部固定定位的按钮会跟随软键盘弹起而顶起，往往会遮挡一部分视图，这对用户的体验有点不好，故本篇文章将利用js来解决这个问题，优化用户体验。

1、解决思路
当软键盘弹起时，将底部弹起的按钮隐藏；当软键盘收起时，将按钮正常显示。

2、确定捕获事件
（1）input输入框的聚焦/失焦事件
分析：当input输入框聚焦，软键盘弹起，将底部弹起的按钮隐藏；当点击视图任意位置，input输入框失焦，软键盘收起，按 钮显示是行的通的。不过，存在一个盲区：当点击软键盘的原生收起按钮‘▼’时，焦点仍然在输入框内，失焦事件无法被触发，按钮仍是隐藏状态！
结论：无法满足需求。
（2）window的resize事件
分析：不管是软键盘的弹起和收起事件都会立即触发window的resize事件，满足需求。
3、绑定事件

// 获取视图原始高度
let screenHeight = document.body.offsetHeight	
// 为window绑定resize事件
window.onresize = function () {
      let nowHeight = document.body.offsetHeight
      if (nowHeight < screenHeight) {
        // 将底部弹起的按钮隐藏（可使用给按钮添加相应消失类）
      } else {
        // 将按钮正常显示（可使用给按钮移除相应消失类）
      }
    }

4、使按钮消失的方法（消失类的样式css）

  • display: none // DOM元素直接不渲染，在文档流不占位置
  • visibility: hidden // DOM元素仍渲染，在文档流占位置，但不可见，不可触发事件
  • opacity: 0 // DOM元素仍渲染，在文档流占位置，但不可见，可点击，可触发事件
  • transform: tranlateX(‘500px’) // DOM元素仍渲染，在文档流占位置,只是移出了可见范围

附：方法二

原因分析

安卓端：安卓中，如果将footer元素设置为position:fixed或absolute，因为软键盘会改变页面的高度（将页面顶上来），因此footer元素也跟着移动上来，导致页面变形；

IOS端：苹果的软键盘是覆盖的（分层），因此H5页面显示没有什么问题。

解决办法：
安卓端解决input键盘弹出导致页面压缩变形的方法为：

方法1：将元素设置成static或者relative，不要脱离文档流。

因为使用fixed或者absolute，会使得元素跟随body的底部移动，而安卓端软键盘将导致body高度变小而导致变形。

方法2：若想设置成absolute，则可以通过js固定其父级元素（如body或者父级div）的高度

例如1：设置元素高度时以px为单位设置，不要以%或vh为单位

  • 若需动态适应不同手机屏幕高度（以px为单位），可以在页面渲染时用js获取屏幕高度，经过计算后得出元素的高度
let Height = window.innerHeight - 160;
$('div').height(Height);

例如2：写个监听resize事件（浏览器窗口大小调整时触发）

let Height = $('body').height();
$(window).resize(function() {
    $('body').height(Height);
});

当键盘弹出的时候，固定body高度不变。

注：不要设置成 fixed