苹果手机在input失焦时键盘缩回缩后,页面不归位解决方法

苹果手机在input失焦时键盘缩回缩后,页面不归位解决方法

$("input").on("blur",function(){
    window.scroll(0,0); //让页面归位
});
 

以下方法失焦时,复位的滚动条位置:在每次输入操作时,首个聚焦表单元素前的滚动条位置

JQ使用:

var sT, sTimer;
$('input , textarea').on('focus',function(){
	if(sTimer){
		clearTimeout(sTimer);
	}else{
		sT = document.documentElement.scrollTop || document.body.scrollTop;
	}
});
$('input , textarea').on('blur',function(){
	sTimer = setTimeout(function(){
		window.scrollTo(0,sT);
	},100);
});

vue使用JS部分:

data() {
	return {
		sT:null,
		sTimer:null,
	}
},
methods:{
	// 苹果手机页面不归位,页面移位至最后一个失焦的input显示最合适的位置
	inputFocus(){
		if(this.sTimer){
			clearTimeout(this.sTimer);
		}
		// else{
			this.sT = document.documentElement.scrollTop || document.body.scrollTop;
		// }
	},
	inputBlur(){
		this.sTimer = setTimeout( () => {
			window.scrollTo(0,this.sT);
		},100);
	},
}

vue使用HTML部分:



你可能感兴趣的:(JS)