input(移动端iOS)输入内容时调用软件盘后页面底部留白问题

Posted 2021-03-24 karila

ios/input输入框调用软键盘底部留白

只需input输入框失去焦点时，让页面自动下移即可恢复

<input placeholder="请输入用户名" v-model="form.account" @blur.native.capture="blurchange"></input>
    blurchange () {
      let currentPosition = ‘‘
      let timer = ‘‘
      let speed = 1 // 页面滚动距离
      timer = setInterval(function () {
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop
        currentPosition -= speed
        window.scrollTo(0, currentPosition) // 页面向上滚动
        currentPosition += speed // speed变量
        window.scrollTo(0, currentPosition) // 页面向下滚动
        clearInterval(timer)
      }, 1)
    }

在该代码基础上增加了一些简单逻辑，判断是否为ios系统和是否为微信6.7.4版本。

代码：

var wechatInfo = navigator.userAgent.match(/MicroMessenger/([d.]+)/i);
var wechatVersion = wechatInfo[1] 
var u = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
if(wechatVersion==‘6.7.4‘&&!!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)){
...代码逻辑
}

 

原文链接：https://blog.csdn.net/weixin_42992083/article/details/85236214?id=1

参考链接：https://juejin.im/post/5c07442f51882528c4469769