H5嵌入安卓时键盘遮挡输入框问题处理

H5嵌安卓键盘遮挡输入框问题处理

h5嵌入安卓，因为安卓的键盘不占页面位置，当输入框在页面底部的情况下，键盘会遮挡输入框，用户看不到输入内容。
解决办法：
1、页面够长，输入框可滑动到可见位置
2、页面不够长，通过控制空盒子的高度，当键盘弹出，给页面增加高度，键盘弹回，去掉高度

<template>
<div>
<input v-model="number1" type="tel" :placeholder="页面够长" @focus="getscr" @blur="setscr">
<input v-model="number2" type="text" :placeholder="页面不够长" @focus="getscr1" @blur="setscr1">
 <div :class="{foot:ifKey}" />
</div>
</template>
<script>
export default{
data(){
 return{
 ifKey:false,
 scrtop: 0, // 滚动
 },
 methods:{
 //页面可滑动，输入框可滑到可视区的情况
  getscr() {
        event.currentTarget.scrollIntoView()
    },
    setscr() {
      document.documentElement.scrollTop = document.body.scrollTop = this.scrtop
    },
    //页面不可滑动，输入框在页面底部，输入框无法滑到可视区的情况
     getscr1() {
      this.scrtop = document.body.scrollTop || document.documentElement.scrollTop
        this.ifKey = true
        var el = event.currentTarget
        setTimeout(() => {
          el.scrollIntoView()
        }, 50)
    },
    setscr1() {
      this.ifKey = false
      document.documentElement.scrollTop = document.body.scrollTop = this.scrtop
    },
 }
</script>