H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
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输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位的更多相关文章
- ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){ setTimeout(() => { co ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头
业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如何干掉呢? <input read ...
- ios下input获取焦点以及在软键盘的上面
<!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- h5 input失去焦点软键盘把页面顶起
var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...
- HTML5移动开发中的input输入框类型
HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...
随机推荐
- Python 正则表达式学习
摘要 在正则表达式中,如果直接给出字符,就是精确匹配. {m,n}? 对于前一个字符重复 m到 n 次,并且取尽可能少的情况 在字符串'aaaaaa'中,a{2,4} 会匹配 4 个 a,但 a{2, ...
- linux基础之vim编辑器
vi : Visual Interface vim : VI Improved : VI的基础加上一些有用的插件 vim编辑器: 文本编辑器, 字处理器, 全屏编辑器, 模式化编辑器 vim的模式有三 ...
- 用vim + xdebug 来追踪thinkphp的执行过程
tree命令的使用几个有实际应用的参数 -a 这是默认的 -d: 只显式目录, 不需要显式目录下的文件 -L: 列出显式的深度. 当前目录下的所有东西为第一级... 在tp下, 有多个Common但是 ...
- 再谈 linux 的sed用法
很多东西, 如果太复杂, 太庞杂, 一开始, 可以只掌握最简单的. 如果连最简单的都不能掌握, 那看那么多有什么用? 关于cut, sed的 处理过程和思想? vm: virtual machine, ...
- Maven集成Tomcat插件
目录 类似插件及版本区别: 本地运行,启动嵌入式tomcat: 错误一: 错误二: Idea运行调试: vscode运行调试: 远程部署: 项目中的pom.xml配置: Tomcat中的tomcat- ...
- Docker 命令收集
Docker 命令收集 1.删除所有容器 docker rm $(docker ps -a -q) 2.删除所有镜像 docker rmi $(docker images -q) 3.启动镜像 doc ...
- Java程序运行机制及开发环境
Java既是编译型语言,又是解释型语言 java源文件首先需要通过javac编译生成后缀名为.class的字节码文件(与平台无关,只面向JVM),然后使用Java虚拟机将字节码解释成特定平台上的机器码 ...
- 【AI】微软人工智能学习笔记(三)
微软R服务 01|开源的R R实际上是统计学的编程语言,主要作用是对数据挖掘,统计,分析,可视化,机器学习等. 02|微软R 03| HDInsight R Spark集群存储在azure blob ...
- zepto 入门
2017-03-17 文章来源:http://www.cnblogs.com/daysme zepto 简介 jq虽然有一些衍生的插件可用在移动端上,但它有点大. click 有,但有问题 onmou ...
- 1、Python模块和包(0602)
模块.异常.运行环境.mysqldb 模块: 顶层文件:作为整个文件的程序入口,就是负责去调用其他文件中的代码来实现程序流程功能的,称为顶层程序文件, 模块文件1 模块文件2 python模块 1.可 ...