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

这个问题是因为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
	        }
      	}
    }
  },

猜你喜欢

转载自blog.csdn.net/weixin_43631810/article/details/88104834