检测手机键盘及解决手机端底部定位问题

问题

移动端混合开发经常会遇到这样的问题。输入框一出来，然后底部fixed定位的元素就会顶上来遮住上面的输入框。所以手机上一般不使用fixed，一般用absolutel来代替fixed定位。

解决方案

• 第一种解决办法：通过检测blur和focus，但是键盘旁边的关闭键盘显示不触发focus事件。所以这个不太适用
• 第二种解决办法：那就只能通过间接的去检测了，可以通过检测当前可视区域的大小来判断键盘是否显示。当可视区域变小了，然后就把父元素的定位设置为reactive，当可视区域变大了就把父元素设置为static定位，这样底部定位元素就不会浮在输入框上面了。

// 示例代码
window.addEventListener('resize', function () {
    let currentHeight = document.documentElement.clientHeight;
    if (currentHeight < height) {
        self.setRelative();
    }
    else {
        self.setStatic();
    }
});
复制代码

• 第二种解决办法会随着输入键盘上下移动。可以采用最小高度的办法，底部和父元素的定位都不变，可是不同屏幕大小不一样。这样的话就需要做响应式的适配。这一块只要做一个不同屏幕的适配。按照ue设计的图纸为标准，这快需要计算一下。

总结

在使用第二种解决方案的时候记得把开始通过input检测focus和blur的代码去掉，因为会有blur事件和window的resize事件会有延迟。