恒富网

苹果手机在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部分：

<input @focus="inputFocus" @blur="inputBlur" class="" type="text" placeholder="填写您的姓名" />

<input @focus="inputFocus" @blur="inputBlur" class="" type="tel" placeholder="填写您的商城注册手机号" />

<textarea @focus="inputFocus" @blur="inputBlur" placeholder="写下想说的话"></textarea>