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

时间:2022-09-08 19:04:29

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

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

//blur失去焦点事件
$("input,select,textarea").blur(function(){
setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || ;
                window.scrollTo(, Math.max(scrollHeight - , ));
            }, );
})

注:scrollTo(xpos,ypos)

xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。

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

  1. ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

    input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){   setTimeout(() => {    co ...

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

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

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

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

  4. IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头

    业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如何干掉呢? <input read ...

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

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

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

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

  7. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

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

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

  9. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...

随机推荐

  1. 原生态PHP&plus;mysql 实现分页

    <?php/** * 数据分页 * 时间:2016-07-06 *//**1传入页码**/ $page = $_GET['p'];/**2根据页码取数据:php->mysql处理**/$h ...

  2. datawindow 创建操作报表。

    最近制作做了几个简单的报表,写下主要的代码.以便各位参考. public void FillDW(DataTable dtbResult) { try { DataRow dtFr; ; , j = ...

  3. 理解hadoop的Map-Reduce数据流&lpar;data flow&rpar;

    http://blog.csdn.net/yclzh0522/article/details/6859778 Map-Reduce的处理过程主要涉及以下四个部分: 客户端Client:用于提交Map- ...

  4. Android学习笔记(九)一个例子弄清Service与Activity通信

    上一篇博文主要整理了Service的创建.绑定过程,本篇主要整理一下Service与Activity的通信方式.包括在启动一个Service时向它传递数据.怎样改变运行中的Service中得数据和侦听 ...

  5. JavaScript学习之—prototype

    一.利用prototype扩展String方法,去除字符前后空格: String.prototype.trim = function String$trim() { if (arguments.len ...

  6. 一口一口吃掉Hibernate(八)——Hibernate中inverse的用法

    一.Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了“inverse=false”(默认),那么那一方就有责任负责之 ...

  7. Windows 小端存储

    小端->高高低低(高位存在高地址,低位存在低地址)

  8. 错误代码: 1052 Column &&num;39&semi;stu&lowbar;id&&num;39&semi; in field list is ambiguous

    1.错误描述 1 queries executed, 0 success, 1 errors, 0 warnings 查询:select stu_id, (SELECT stu_name FROM t ...

  9. 笔记:Struts2 拦截器

    配置拦截器 Struts.xml 配置文件中,使用<interceptor-/>来定义拦截器,有属性 name 表示拦截器的名称,class 表示拦截器的具体首先类,可以使用<par ...

  10. Exchange 2010邮件服务器的搭建和部署

    Exchange主要是针对内部网或者企业网用户进行搭建的邮件服务器软件,利用它能够很快地搭建安全性较高的内部网邮件系统. 本次搭建在个人环境中实践,纯属爱好折腾,分四步骤,1.搭建windows 20 ...