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. 0x14哈希之兔子兔子

    参考链接:https://www.cnblogs.com/wyboooo/p/9813428.html 题目链接:https://www.acwing.com/problem/content/140/ ...

  2. JS实现打开本地文件或文件夹 ActiveXObject

    IE浏览器打开C盘,测试可用. 如果浏览器报错提示:ActiveXObject is not defined Internet 选项 -> 安全 - >安全级别,调低级别 function ...

  3. linux下 如何切换到root用户

    默认安装完成之后并不知道root用户的密码,那么如何应用root权限呢? (1)sudo 命令 xzm@ubuntu:~$  sudo 这样输入当前管理员用户密码就可以得到超级用户的权限.但默认的情况 ...

  4. Spring Boot 线程池

    参考 SpringBoot 线程池 程序猿DD-Spring Boot使用@Async实现异步调用:自定义线程池 如何优雅的使用和理解线程池 Spring Boot线程池的使用心得 博客园-Sprin ...

  5. .net 去除特殊字符

    str = Regex.Replace(str, @"<script[^>]*?>.*?</script>", "", Regex ...

  6. 洛谷 P3376 【【模板】网络最大流】

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行包含三个正整数ui. ...

  7. IOS Xcode编译项目-报错“ld: library not found for -XX”

    一般是因为导入新项目的时候报错的.原因是引入的依赖库的问题.重新执行pod install应该可以解决.不过,有时候如果重新执行pod install无法执行,可以采用以下方法: 在终端中cd到项目所 ...

  8. OO第四次博客作业!

    oo第四次博客作业 一.测试与正确性论证比较 测试只是单方面片面的证明对于当前的输入程序是正确的,测试只能证明程序有错误,不能说明程序是对的. 正确性论证是程序达到预期目的的一般性陈述,是通过规范化的 ...

  9. Reids 持久化AOF 重写实现原理

    AOF重写 AOF重写并不需要对原有AOF文件进行任何的读取,写入,分析等操作,这个功能是通过读取服务器当前的数据库状态来实现的.(auto-aof-rewrite-percentage和auto-a ...

  10. font-spider-plus,字体压缩插件使用笔记

    font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider 主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩, 1,npm i font ...