微信小程序:解决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
	        }
      	}
    }
  },
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值