ios 软键盘弹出, 页面整体上移问题

一、问题描述
   对于 ios 系统,输入框输入内容,软键盘弹出,页面内容整体上移,但是软键盘收起,页面内容不会自动回到原本的位置,必须手动下拉才会恢复
   刚开始遇到的时候,心想真是什么鬼畜问题都有,这边直接给出解决办法了

二、解决方式
首先在你们函数工具文件中加上下面的函数

// util.js
function inputBlur () {
  let u = navigator.userAgent
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  if (isIOS) {
    setTimeout(() => {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }, 200)
  }
}

在具体的文件中使用方式如下:

  <!-- 加上 @blur.prevent="checkValue" -->
<input 
  v-model="inputValue"
  placeholder="请输入"
  type="text"
  @blur.prevent="checkValue"
>

checkValue() 函数

checkValue () { 
  inputBlur()
  this.$emit('checkValue')
},

至此, 关于 ios 软键盘整出的鸡肋问题就解决啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。