微信IOS6.7.4版本在输入框弹出键盘后,页面没恢复

ios中,键盘的弹起,页面会往上挪动,使输入框展示在页面中间,键盘隐藏页面会下挪恢复原状

在6.7.4版本中,不会回挪,这将导致有相对定位(fixed,absolute:相对于浏览器窗体)的节点发生位移,导致节点点击事件偏移而无法选中

解决方案:输入框失去焦点(即键盘隐藏时),手动调整页面,document.activeElement.scrollIntoViewIfNeeded(true)

在每个输入框失去焦点时,响应以下事件即可

function blurAdjust( e ){
	setTimeout(()=>{
		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
			return
		}

		let result = 'pc';
	    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
	        result = 'ios'
	    }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
	        result = 'android'
	    }

	    if( result = 'ios' ){
			document.activeElement.scrollIntoViewIfNeeded(true);
	    }
	},400)
}

TIP:这里设置了400毫秒的延时,为了防止一个页面多个输入框时,多次调整从而导致页面调整错乱

猜你喜欢

转载自blog.csdn.net/Mr_linjw/article/details/85050920