解决微信浏览器抬起键盘页面下面空白问题附源码
日期：2019-01-18
来源：程序思维浏览：3205次
- 微信6.7.4 H5页面里的select,input软键盘弹起的时候页面会上移，软键盘关闭页面不会下移。导致页面空缺了一部分。
- 微信6.7.3及其它版本不会有这个问题！页面会随着软键盘关闭而下移恢复正常！
微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位
最新ios的微信6.7.4版本，在input收起键盘后，键盘区会有个遮挡区域。
$('textarea').on('blur',function(){
setTimeout(function(){
window.scrollTo(0, 0)
},100)
})
亲测有效
键盘添加blur事件 window.scrollTo(0, 0)
建议设置延时100
//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight);
原生js写法：
(function(){
var oInputs=document.querySelectorAll(".input1,.input2");
if (oInputs.length>0){
for (var i=0;i<oInputs.length;i++){
oInputs[i].addEventListener("blur",function(){
document.body.scrollTop=0;
document.documentElement.scrollTop = 0;
},false)
}
}
- 上一篇：自己编写promise完整教程附源码
- 下一篇：js中什么是形参和实参
精品好课
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...