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 ...
随机推荐
- deploy springboot to tomcat
1 在 Eclipse 中建立新的web项目[ABC],之后 转成Maven项目. 2 创建 class Application 3 修改POM 4 修改web.xml 5 exp ...
- Linux中设置vim自动在运算符号两边加上空格
vim中设置自动在=+-之类的运算符号左右两边加上空格.原版的vim不带这个功能,写出的代码例如z=x+y,不美观,很多编译器(如VS)能够自动在符号两边加上空格,如z = x + y,看起来比较美观 ...
- ng-repeat 中的 track by $index
用ng-repeat指令遍历一个javascript数组,当数组中有重复元素的时候,angularjs会报错,这是因为ng-Repeat不允许collection中存在两个相同Id的对象. 对于数字或 ...
- Maven编译、打war包
Eclipse环境,每次alt+F5刷新Maven项目时,总是会把项目的Java依赖刷新成1.5. 解决办法:在pom中加入如下片段 <plugin> <groupId>org ...
- oc与swift比较
swift试是用语言层面的雕虫小技和oc的机制大道进行pk. 从整体上来说,oc是一个更加优秀的语言.
- day09-1 列表,元祖的内置方法
目录 列表类型的内置方法 作用 定义方式 方法 优先掌握 需要掌握 储存一个值or多个值 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 元 ...
- Python 函数部分练习题
函 数 基 础 1.写函数,,用户传入修改的文件名,与要修改的内容,执行函数,完成批了修改操作2.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数 3.写函数,判断用户传入的 ...
- 如何使用图形界面Webmin管理linux服务器
出处:http://linux.cn/thread/11992/1/1/ 如何使用图形界面Webmin管理linux服务器 一台典型的linux服务器运行命令行环境中,并已经包括了一些用于安装和配置各 ...
- STM32 抢占优先级和响应优先级
一.抢占优先级和响应优先级 STM32 的中断向量具有两个属性,一个为抢占属性,另一个为响应属性,其属性编号 越小,表明它的优先级别越高. 抢占,是指打断其他中断的属性,即因为具有这个属性会出现嵌套中 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...