广州明镁工艺品有限公司

今天小编跟大家讲解下有关微信h5 input输入框软键盘关闭后，页面无法回到正常位置 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关微信h5 input输入框软键盘关闭后，页面无法回到正常位置 的相关资料，希望小伙伴们看了有所帮助。

问题：

h5页面有个弹框，里面有input输入框，需要用户输入内容。在ios微信中，当第一次输入内容后，发现页面点击不了，点击一些地方出现错位的情况。

解决方案：

在ios微信里面打开h5页面，当遇到input输入框调出软键盘时候。用户输入完成失去焦点，键盘收回后，会发现input输入框的位置发现变化的情况。这里需要监听失焦事件，并重新设定高度才能解决这个问题。

代码如下：

html：

<input type="tel"onblur="iptblur()"/>

js：

function iptblur(){ var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isiOS) { // 判断是否为IOS系统 setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0));}, 100); } }

来源：爱蒂网