H5,ios键盘唤起,键盘收起以后页面不归位

2,695 阅读1分钟

1.ios键盘唤起,键盘收起以后页面不归位 问题详情描述: 输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑 出现原因分析: 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 解决办法:

投·被保险人姓名
<input class="content-input" placeholder="请输入姓名" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/>

  changeBlur(){
  let u = navigator.userAgent, app = navigator.appVersion;
  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)
  }
  }

拓展知识: position: fixed的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘

方式二:

 isWeiXinAndIos(){
    let ua = '' + window.navigator.userAgent.toLowerCase()
    let isWeixin = /MicroMessenger/i.test(ua)
    let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
    return isWeixin && isIos 
  }

weChatInputBug(){
    let myFunction
    let isWXAndIos =this.isWeiXinAndIos();
    if (isWXAndIos) {
      document.body.addEventListener('focusin', () => {
        clearTimeout(myFunction)
      })
      document.body.addEventListener('focusout', () => {
        clearTimeout(myFunction)
        myFunction = setTimeout(function() {
          window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
        }, 200)
      });
    }
  }
  
  全局监听来实现,经亲自试验,方法二在iphone7 webkitwebview中有兼容性问题,建议选择方式一。

以下是focusin focusout 事件的支持情况供大家参考。