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失去焦点软键盘把页面顶起的更多相关文章

  1. h5项目中关于ios手机软键盘导致页面变形的完美解决方案

    1.项目背景:vue项目,手机加短信验证码登录: 2.问题: 在ios中input吊起软键盘,输入完成后,收起软件盘,页面不会回弹,导致页面下方出现空白,也就是页面变形: 3.最开始的解决方案是,用i ...

  2. ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。

    js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...

  3. input页面居中,软键盘覆盖input

    input框位于底部 对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动, input框位于顶部 这种情况不会出现问题, inp ...

  4. 苹果系统 IOS 12 的H5 BUG :键盘把页面顶上去了,底下留有一块空白区域

    苹果以往的系统是没问题的,一般情况下,点击input唤起键盘后是会自动显示到输入框的地方,然后收起键盘页面就会恢复到底部. 但是如果苹果是已经更新到最新的IOS12的话就会发生一个BUG ,就是键盘唤 ...

  5. js-移动端android浏览器中input框被软键盘遮住的问题解决方案

    我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...

  6. 移动端H5页面解决软件键盘把页面顶起

    在input失去焦点的时候加上强制页面归位 window.scroll(0,0); 上代码 <input data-component="SearchInput" type= ...

  7. flex布局,input点击软键盘激活,底部按钮上移

    安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...

  8. 禁止移动端input弹出软键盘

    在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...

  9. Android EditText弹出软键盘实现页面标题头不动,软键盘弹出在编辑框下面

    为了实现EditText编辑的时候弹出软键盘标题头不动,底部编辑框,上移在这总结: RelativeLayout在弹出软键盘的时候先寻找android:layout_alignParentBottom ...

随机推荐

  1. 关于函数调用约定-thiscall调用约定

    函数调用约定描述了如何以正确的方式调用某些特定类型的函数.包括了函数参数在栈上的分配顺序.有哪些参数将通过寄存器传入,以及在函数返回时函数栈的回收方式等. 函数调用约定的几种类型 stdcall,cd ...

  2. Aspose.Cells基础使用方法整理

    Aspose.Cells 插件,将web端数据以excel形式导出到客户端. 相关文档: https://blog.csdn.net/djk8888/article/details/53065416 ...

  3. 解决PL/SQL管理工具database下拉为空和登录出现ORA-12154

    前言:昨天捣鼓了一下午,终于可以用plsql连接上oracle了... 测试环境:win10 注意问题: (一).环境变量 我发现按网上别人说的那一大推环境配置,很容易出错,我把它们全删了,就留了两个 ...

  4. 工作需求——VBA操作打印机

    因为最近做的事情比较多,平时也多用EXCEL,所以顺便学习EXCEL的功能性的东西 转载:https://msdn.microsoft.com/zh-tw/vba/excel-vba/articles ...

  5. input的radio根据value和name反向显示

    1.获取radio的值,是根据name设置一组单选框. 例如: <div id="sexBox"> <input type="radio" i ...

  6. 如何用IE打开Chrome浏览器

    实现方式,用IE调用cmd命令打开chrome(注意:IE的ActiveX相关设置要启用) <script type="text/javascript"> functi ...

  7. [HDU1160]FatMouse's Speed

    题目大意:读入一些数(每行读入$w[i],s[i]$为一组数),要求找到一个最长的序列,使得符合$w[m[1]] < w[m[2]] < ... < w[m[n]]$且$s[m[1] ...

  8. [luogu2151 SDOI2009] HH去散步 (矩阵快速幂)

    传送门 题目描述 HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因为HH ...

  9. freeswitch 中文语音

    1.下载中文语音包 链接:https://pan.baidu.com/s/1UODvqj8NAQw7_CRatfl0kg 提取码:qwdn 创建目录 /usr/local/freeswitch/sou ...

  10. linux下wps的字体缺失解决方法

    可以参考Mr.Liang 说明:当安装好wps for linux,然后打开wps会提示字体缺失,可做如下操作: 1.下载wps缺失字体(资源侵权联系我删除) 2.解压 unzip -d ./wps_ ...