移动H5页面，Android手机下，input获取焦点弹出系统虚拟键盘时，挡住input解决方法

          最近在写移动端页面的时候，遇到一个问题，在Android手机下，虚拟键盘会将input框遮挡住，具体情况如下图所示:

 

正常页面显示

                              

 

 IOS端显示情况

 

Android端显示情况

 

 

 

解决方式:

<template>
    <div class="change-phone-box">
        <img class="phone-img" :src="'img/change_telephone@2x.png' | assets" alt="修改手机号">
        <p class="tip">您当前的手机号为&nbsp;<span>{{ phoneNum }}</span><br>更改后可用新手机号</p>
    </div>
    <div v-el:keyboard>
        <div class="m-register-pannel">
            <div class="m-form-item v-table">
                <span class="m-form-label v-cell"><i class="icon icon-phoneNum"></i></span>
          <span class="m-form-content v-cell">
            <input type="tel" placeholder="输入手机号" v-model="mobile" @focus="keyboardBounce(false)"
                   @blur="keyboardBounce(true)" @keyup="changeStyle($event)" maxlength="11"/>
          </span>
            </div>
            <div class="m-form-item v-table">
                <span class="m-form-label v-cell"><i class="icon icon-messageCode"></i></span>
          <span class="m-form-content v-cell">
            <input type="tel" placeholder="短信验证码" v-model="verifyCode" @focus="keyboardBounce(false)"
                   @blur="keyboardBounce(true)" maxlength="6"/>
          </span>
          <span class="fr get-message-code" @click="msgCode()"
                :style="{'background-color': (canGetMsgCode?'#00cc99':'#c4cdd4') }">
            {{msgCodeBtnText?msgCodeBtnText:'获取验证码'}}
          </span>
            </div>
        </div>
        <div class="m-form-action">
            <button full @click="changePhoneSubmit()">确&nbsp;认</button>
        </div>
    </div>
</template>

<script type="text/babel">

    import Config from '../app.config'

    export default {
        data () {
            return {}
        },
        vuex: {
            getters: {},
            actions: {}
        },
        methods: {
            keyboardBounce(isClose){
                if (Config.isAndroid) {
                    var keyboard = this.$els.keyboard;
                    var timer = setInterval(function () {
                        keyboard.scrollIntoView(false);
                        if (isClose) {
                            clearInterval(timer);
                        }
                    }, 200);
                }
            },
        }
    }
</script>


</body>
</html>

 

参考链接: Element.scrollIntoView()