18910140161

微信h5 input输入框软键盘关闭后 页面无法回到正常位置

顺晟科技

2021-06-16 10:49:47

510

问题:

H5页面有一个带有输入框的弹出框,要求用户输入内容。在ios微信中,次输入内容时发现页面无法点击,部分点击错位。

解决方案:

在ios微信打开h5页面,在输入输入框调出软键盘。当用户在输入完成时失去焦点,当键盘缩回时,会发现输入框的位置发生了变化。这里需要监控失焦事件,重置高度来解决这个问题。

代码如下:

html:

输入类型='tel' onblur='iptblur()'/

js:

函数iptblur(){

var u=navigator.userAgent

var isiOS=!u.match(/\(i[^;] ;(U;)?CPU。MAC OS X/);

If(isIOS) {//判断是否是IOS系统

setTimeout(()={

const scroll height=document . document element . scroll top | | document . body . scroll top | | 0;

window.scrollTo(0,Math.max(scrollHeight - 1,0));

}, 100);

}

}

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航