移动端全键盘弹出遮挡input框

Question

移动端H5开发时，input获得焦点弹出软键盘会将input遮挡住，想要实现的效果是：
像掘金APP的登录那样，软键盘弹出时将整个输入框那一块布局向上顶一段距离，而下面的第三方登录部分不变，有没有人做过这样的，求解决方法

Answer 1

之前用vue的时候iphone没事,安卓才会这样,
写了一个 vue-directive的绑定.

通过的原理是这样,
获取当前绑定的input框,在可视窗口里面的top,
然后去获取当键盘弹起时的, innerHeight,
然后计算下面几种场景,

1. input被键盘全部挡住,
2. input被键盘挡住一部分,
3. 正常

代码如下 可供参考

/*
    用于解决安卓弹出小键盘导致输入框被挡住的问题
*/

import Vue from 'vue';

function input_scroll_f(){
    //获取元素在可视窗口的位置信息
    let { top: el_top, height: el_height } = this.getBoundingClientRect();
    //获取元素最近一级position父级
    let parent_dom = this.offsetParent;
    let parent_scroll = parent_dom.scrollTop;

    setTimeout(() => {
        //获取当前可视窗口高度
        let inner_h = window.innerHeight;
        //计算元素顶部和当前高度的差值
        let compare_h = el_top - inner_h;

        //这里的数值就是距离键盘的高度
        if(compare_h > 0) {
            parent_dom.scrollTop = compare_h + parent_scroll + el_height + 80;
        }
        //数值50, 表示第二种情况,被挡住的多少
        else if(Math.abs(compare_h) < (el_height+50)) {
            parent_dom.scrollTop = parent_scroll + el_height + 80;
        }
        
    }, 600)
}

export default {
    bind(el, binding, vnode) {
        el.addEventListener("click", input_scroll_f, false);

    },
    unbind(el){
        el.removeEventListener("click", input_scroll_f);
    }

}

Answer 2

let coordinateY;

let offsetY;

function tapCoordinates(event) {
    const viewPortHeight = window.innerHeight;

    coordinateY = event.touches[0].clientY;

    offsetY = (viewPortHeight - coordinateY);
}

function keyboardShowHandler(event) {
    const keyboardHeight = event.keyboardHeight;

    const bodyMove = <HTMLElement>document.querySelector('ion-app');

    const bodyMoveStyle = bodyMove.style;

    const compensationHeight = 80;

    if (offsetY < keyboardHeight + compensationHeight) {
        bodyMoveStyle.top = -compensationHeight + 'px';

        bodyMoveStyle.height = window.innerHeight + compensationHeight + 'px';
    }
}

function keyboardHideHandler() {
    const removeStyles = <HTMLElement>document.querySelector('ion-app');

    removeStyles.removeAttribute('style');
}

window.addEventListener('native.keyboardshow', keyboardShowHandler);

window.addEventListener('native.keyboardhide', keyboardHideHandler);

window.addEventListener('touchstart', tapCoordinates);

我是拿ionic3做的，仅供参考

Answer 3

个人的解决方案：IOS自动顶(但下部多余很多空白，你没遇到，所以略)

---

安卓：focus的时候，给页面外层box绑定事件(addEvent...)，box设置定位，整体上移Yrem(上移尺寸最好是按input框距顶部距离，rem基本能适配正常手机，但部分手机宽高不成比例)
同理，第三方登录也是focus时定位，然后设置距离顶部的距离
blur的时候，remove刚刚设置的所有属性

Answer 4

有详细点的代码么？