关于移动端input调出输入法上的问题

做H5项目中遇到的问题

• 调出的输入法时页面上移,隐藏输入法后导致页面不恢复

  原因: 由于设置了视口高度 height:100vh 导致隐藏输入法时不能滚动导致
  解决: 删除 或 min-height:100vh ;

• 点击input 聚焦时弹出的输入法不能使页面上移,使得输入法遮挡住input 让input不能在可视区域内

  解决: 监听获取焦点与失去焦点

// 输入框获得焦点时，元素移动到可视区域
  <input
     @focus="onFocus"
     @blur="onBlur"
     type="text"
     v-model="fromData.inputNickName"
     placeholder="请输入您的称呼"