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

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:917篇文章
  • 发布时间:2020年06月06日 11:12:47
  • 所属分类:html, Html5
  • 阅读次数:3134次阅读
  • 标签:

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

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!