微信小程序:解决ios部分机型软键盘弹起挡住输入框的问题

前端 专栏收录该内容
23 篇文章 2 订阅

这个问题是因为input在获取焦点时e.detail.height获取的键盘高度不准导致的。
经过测试发现是ios独有的问题,并且只在iphone6 6s 7 8 这种屏幕尺寸为667*375的手机中会出现,并且非必现。
通过小程序开调试看打印发现,当键盘挡住输入框时,获取的键盘高度为216px,正常时键盘高度为258px,相差了42px。
解决方法:

<input bindfocus="inputFocus"></input>
onLoad(){
	this.isIos()
},
isIos(){
	var that = this
    wx.getSystemInfo({
      	success: function (res) {
        	if (res.platform == "ios" && res.windowHeight == 667 && res.windowWidth == 375){
          		that.setData({
            		isIphone : true
          		})
        	}else{
          		that.setData({
            		isIphone: false
          		})
        	}
      	}
    })
}
inputFocus(e) {
    var that = this
    var inputHeight = 0 //键盘弹起高度
    if (e.detail.height) {
      	inputHeight = e.detail.height
      	if (that.data.isIphone) {
	        if (210 < inputHeight && inputHeight < 220){ //对应机型获取键盘高度错误时
	        	inputHeight = e.detail.height + 42
	        }
      	}
    }
  },
  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值