移動(dòng)端全鍵盤(pán)彈出遮擋input框

個(gè)人的解決方案：IOS自動(dòng)頂(但下部多余很多空白，你沒(méi)遇到，所以略)

安卓：focus的時(shí)候，給頁(yè)面外層box綁定事件(addEvent...)，box設(shè)置定位，整體上移Yrem(上移尺寸最好是按input框距頂部距離，rem基本能適配正常手機(jī)，但部分手機(jī)寬高不成比例)
同理，第三方登錄也是focus時(shí)定位，然后設(shè)置距離頂部的距離
blur的時(shí)候，remove剛剛設(shè)置的所有屬性

之前用vue的時(shí)候iphone沒(méi)事,安卓才會(huì)這樣,
寫(xiě)了一個(gè) vue-directive的綁定.

通過(guò)的原理是這樣,
獲取當(dāng)前綁定的input框,在可視窗口里面的top,
然后去獲取當(dāng)鍵盤(pán)彈起時(shí)的, innerHeight,
然后計(jì)算下面幾種場(chǎng)景,

1. input被鍵盤(pán)全部擋住,
2. input被鍵盤(pán)擋住一部分,
3. 正常

代碼如下 可供參考

/*
    用于解決安卓彈出小鍵盤(pán)導(dǎo)致輸入框被擋住的問(wèn)題
*/

import Vue from 'vue';

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

    setTimeout(() => {
        //獲取當(dāng)前可視窗口高度
        let inner_h = window.innerHeight;
        //計(jì)算元素頂部和當(dāng)前高度的差值
        let compare_h = el_top - inner_h;

        //這里的數(shù)值就是距離鍵盤(pán)的高度
        if(compare_h > 0) {
            parent_dom.scrollTop = compare_h + parent_scroll + el_height + 80;
        }
        //數(shù)值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);
    }

}

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做的，僅供參考