h5输入法遮挡输入框

问题

当你聚焦输入框的时候，会打开输入法，但是没有将最下面的内容顶上去，而是输入法将下面的部分遮挡住了，所以只能盲输，看不到内容。
安卓会出现这个问题。

解决

我的解决

想法与实现都比较简单，但是效果略差一点。
在最下面加一个div空盒子，高度我随意给了一个。
当输入框聚焦的时候，让盒子显示，失焦的时候，让盒子隐藏。聚焦的同时，让页面向下滚动盒子的高度。
可以将聚焦改成点击事件。
不足之处：当你点击输入法的收回时，并不能被监听到，这种情况下，最下面会多出一个盒子的空白。
代码
使用了jQuery，需要安装：在vue中引入jQuery
#scrollId是当前页面的包裹标签

<input @focus="visitorPhoneFocus" @blur="visitorPhoneBlur">
<!-- 弹出盒子 -->
<div class="popup-box" id="popup-box" v-show="keyTab"></div>

data () {
  return {
    keyTab: false,
  }
}

methods: {
  visitorPhoneFocus () {
    if (/Android/gi.test(navigator.userAgent)) {
      this.keyTab = true 
      let tempH = $('#popup-box').height()
      $('#scrollId').animate({scrollTop: tempH + 'px'}, 10, () => {        }) 
    }                           
  },
  visitorPhoneBlur () {
    this.keyTab = false
  },
}

网站导航

网站导航