键盘遮挡input

当软键盘弹出时，可能会遮挡输入框，为了避免这种情况，可以通过以下几种方式解决：

1. 使用CSS样式

可以通过设置输入框的bottom值，将输入框向上移动，避免被软键盘遮挡。

input {
  position: fixed;
  bottom: 0;
}
input:focus {
  bottom: 200px;
}

2. 使用JavaScript

可以通过监听软键盘的弹出和隐藏事件，根据软键盘的高度动态调整输入框的位置，避免被软键盘遮挡。

var input = document.querySelector('input');
var keyboardHeight = 0;

window.addEventListener('resize', function() {
  var currentKeyboardHeight = window.innerHeight - document.body.clientHeight;
  if (currentKeyboardHeight > 0 && currentKeyboardHeight !== keyboardHeight) {
    keyboardHeight = currentKeyboardHeight;
    input.style.bottom = keyboardHeight + 'px';
  } else {
    input.style.bottom = '0';
  }
});

3. 使用第三方插件

可以使用第三方插件来解决输入框被软键盘遮挡的问题。例如，vue-soft-keyboard插件可以监听软键盘的弹出和隐藏事件，并且动态调整页面布局，使得输入框不被软键盘遮挡。

<template>
  <div>
    <input ref="inputRef" type="text">
    <soft-keyboard :input="inputRef" @show="onSoftKeyboardShow" @hide="onSoftKeyboardHide"></soft-keyboard>
  </div>
</template>

<script>
import softKeyboard from 'vue-soft-keyboard'

export default {
  components: {
    softKeyboard
  },
  data () {
    return {
      inputRef: null
    }
  },
  methods: {
    onSoftKeyboardShow (e) {
      // 获取键盘高度并调整输入框位置
      const height = e.detail.height
      this.$refs.inputRef.style.bottom = `calc(100vh - ${height}px)`
    },
    onSoftKeyboardHide () {
      // 隐藏键盘并恢复输入框位置
      this.$refs.inputRef.style.bottom = 0
    }
  }
}
</script>