移动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">您当前的手机号为 <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()">确 认</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()