码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-10-25 13:27:28      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:hang   ios系统   变量   版本   参考   position   问题   navigator   hold   

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

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

标签:hang   ios系统   变量   版本   参考   position   问题   navigator   hold   

原文地址:https://www.cnblogs.com/karila/p/11737243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!