h5 input失去焦点软键盘把页面顶起
var broswer=localStorage.getItem('temp') //浏览器环境
var u = navigator.userAgent
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //这个判断 是不是ios手机
var flag
var myFunction
if(broswer=='wx' && isiOS){ //既是微信浏览器 又是ios============(因为查到只有在微信环境下,ios手机上才会出现input失去焦点的时候页面被顶起)
document.body.addEventListener('focusin', () => { //软键盘弹起事件
flag=true
clearTimeout(myFunction);
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
flag=false
if(!flag){
myFunction = setTimeout(function(){
window.scrollTo({top:0,left:0,behavior:"smooth"})//重点 =======当键盘收起的时候让页面回到原始位置
},200);
}else{
return
}
})
}else{
return
}
h5 input失去焦点软键盘把页面顶起的更多相关文章
- h5项目中关于ios手机软键盘导致页面变形的完美解决方案
1.项目背景:vue项目,手机加短信验证码登录: 2.问题: 在ios中input吊起软键盘,输入完成后,收起软件盘,页面不会回弹,导致页面下方出现空白,也就是页面变形: 3.最开始的解决方案是,用i ...
- ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...
- input页面居中,软键盘覆盖input
input框位于底部 对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动, input框位于顶部 这种情况不会出现问题, inp ...
- 苹果系统 IOS 12 的H5 BUG :键盘把页面顶上去了,底下留有一块空白区域
苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部. 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG ,就是键盘唤 ...
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- 移动端H5页面解决软件键盘把页面顶起
在input失去焦点的时候加上强制页面归位 window.scroll(0,0); 上代码 <input data-component="SearchInput" type= ...
- flex布局,input点击软键盘激活,底部按钮上移
安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...
- 禁止移动端input弹出软键盘
在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...
- Android EditText弹出软键盘实现页面标题头不动,软键盘弹出在编辑框下面
为了实现EditText编辑的时候弹出软键盘标题头不动,底部编辑框,上移在这总结: RelativeLayout在弹出软键盘的时候先寻找android:layout_alignParentBottom ...
随机推荐
- Primitive data types recap
- 3ds Max制作欧式风格的墙壁路灯效果
在这篇文章中,我将解释我创建我的形象元宵节的步骤.我只是在寻找一个很好的参考图像在互联网上的东西,我觉得我想要的模型,这个形象.我发现了一个巨大的灯笼形象,但在白天的图片拍摄.我想改变我的形象和显示的 ...
- day15 函数对象以及作用域
目录 函数对象 函数对象的四大功能 函数的嵌套 名称空间和作用域 名称空间 考试必考 作用域 global nonlacal LEGB原则 函数对象 ==Python中一切皆对象== 函数名也可以看成 ...
- 使用jd-gui+javassist修改已编译好的class文件
1.原因:因为公司代码管理不当导致源码丢失,只好已编译好的class文件进行修改 2.首先先在myeclipse中新建java项目并导入javassist 3.将需要修改的文件放到指定文件夹下 4.. ...
- 【转】Retina 屏幕下,网页图片的显示兼容
感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...
- BZOJ 1016 最小生成树计数(矩阵树定理)
我们把边从小到大排序,然后依次插入一种权值的边,然后把每一个联通块合并. 然后当一次插入的边不止一条时做矩阵树定理就行了.算出有多少种生成树就行了. 剩下的交给乘法原理. 实现一不小心就会让程序变得很 ...
- CF449D Jzzhu and Numbers (状压DP+容斥)
题目大意: 给出一个长度为n的序列,构造出一个序列使得它们的位与和为0,求方案数 也就是从序列里面选出一个非空子集使这些数按位与起来为0. 看了好久才明白题解在干嘛,我们先要表示出两两组合位与和为0的 ...
- Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Manacher(最大回文字串)
很好的讲解 注意两端的字符要不同,同时数组要开大一些 [Manacher]最长回文子串 #include<bits/stdc++.h> #define REP(i, a, b) for(r ...
- 洛谷 P1134 阶乘问题
一开始只保留最后一位,交上去29 #include<cstdio> #include<cmath> #include<algorithm> #define REP( ...