H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位。

解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效,

$("input,select").blur(function(){
setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
})

原文:https://blog.csdn.net/weixin_42573146/article/details/85044386

input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置的更多相关文章

  1. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  2. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

  3. h5 input失去焦点软键盘把页面顶起

    var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...

  4. ios下input focus弹出软键盘造成fixed元素位置移位

    正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...

  5. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  6. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  7. php实现input输入框失去焦点自动保存输入框的数据

    最近做一个输入框失去焦点时自动保存数据的功能,当然就是jQuery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据咯.主要是要注意一下中文的问题,所以中间需要转一 ...

  8. android输入框显示在软键盘上边

    有时候在界面需要输入的时候,如果输入框在界面的下方,软键盘弹出的时候会遮挡输入框界面,对用户的体验不是很好. 在网上找的别人的解决方案 首先: 清单文件里面配置:android:windowSoftI ...

  9. android开发 软键盘出现后 防止EditText控件遮挡 总体平移UI

    在EditText控件接近底部的情况下 软键盘弹出后会把获得焦点的EditText控件遮挡 无法看到输入信息  防止这种情况发生 就须要设置AndroidManifest.xml的属性 前面的xml信 ...

随机推荐

  1. Java笔试

    异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...

  2. 解决js的 Math取正弦值 余弦值不准确的问题

    //角度 var  vAngle=90: //正弦值 var vSin=Math.round(Math.sin((vAngle * Math.PI/180)) * 1000000) / 1000000 ...

  3. python程序—士兵出击

    class Gun: def __init__(self,gun_type): self.gun_type=gun_type self.bullet_count= def add_bullet(sel ...

  4. 遇到的Cocos2dx问题

    平时工作中,多多少少,总会遇到些棘手的问题,此文章会不断更新,避免下次再入坑  Cocos 官方相关下载 https://github.com/fusijie/Cocos-Resource Easin ...

  5. gcc 无法编译c17程序解决办法

    1.保证将gcc程序升级到7.1以上. 2.如果用命令行手工编译,就多加个参数-std=c++17,例如命令应该是: "g++" -std=c++17  "text.cp ...

  6. js把某个div或其他元素用图片的形式导出或下载

    很多时候需要用到把页面上的某个块元素用图片的形式导出来,例如导出一些表格构成的单据 思路:把指定的html内容转换成canvas,然后再转换成图片 这里推荐使用这两个库 <script src= ...

  7. Collectors类中的静态工厂方法

    工厂方法 返回类型 用于 toList List<T> 把流中的所有数据元素收集到List集合中. stream.collect(toList());  toSet Set<T> ...

  8. 基于三层架构项目下的Ado【六】

    一.基于三层架构项目下的Ado增删改查总结,提示:现在一般都是使用EF框架操作. 1. 先在model层创建出一个和你将会查询出一样类型的表,比如你将查询出的有五个字段,那么你就需要创建出一个和你查询 ...

  9. .class 缓存

    项目用的是Ant. 场景: Class A{ private static final String HHH="hello"; } Class B{ public void met ...

  10. rsyslog+loganalyzer配置

    1.loganalyzer服务器搭建[root@localhost ~]# getenforce #查看selinux是否关闭[root@localhost ~]# setenforce 0 #临时关 ...