html5页面当点击input输入框弹出手机上键盘就会把footer顶了上来

Question

如图所示，这个问题怎么解决呢？

Answer 1

完美兼容ios和安卓的方法见下面代码，这个问题我也捉摸了好久
（实现思路就是使用resize时间，键盘弹起会触发该事件，此时window.innerHeight比窗口高度要小，进行按钮的隐藏即可）

// 窗口高度
const H = window.innerHeight;

// 页面初始化后绑定resize方法
window.addEventListener('resize', () => {
    if(window.innerHeight < H){
       // 隐藏按钮
       this.setState({
           showBtn: false
       })
    }else{
        // 显示按钮
        this.setState({
            showBtn: true
        })
    }
});

Answer 2

弹出键盘的时候窗体高度会改变；你可以监控屏幕高度，当弹出键盘时，高度改变了隐藏或显示footer

Answer 3

这个好像是比较老的IOS的问题，iOS下的 Fixed + Input 调用键盘的时候fixed无效问题，说是新版本解决了，但是我开发过程中还是有，经常用 absolute 或者 JS触发事件然后动态计算什么的。具体可自行Google

Answer 4

监听一下focus事件，做个hack

Answer 5

    const u = navigator.userAgent;
    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    const nav = document.querySelector(".nav")
    if(isAndroid) {
        const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
        window.onresize = function () {
            const nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                if (clientHeight > nowClientHeight) {
                    //键盘弹出的事件处理
                    nav.style.bottom = '-100vw'
                }else {
                    nav.style.bottom = '0'

                }
            }
        }
    }

Answer 6

楼主这个问题解决了吗？我在做一个手机端单页面应用，同样遇到这个问题，不过我是顶部的搜索栏，点击input就会导致定位失效。还没找到解决办法