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 ...
随机推荐
- 翻硬币|2013年蓝桥杯B组题解析第八题-fishers
翻硬币 小明正在玩一个"翻硬币"的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:oooooo 如果同时翻转左 ...
- 一个涉及到浮点寄存器的CM
这次找小伙伴要了他的一个CM,怎么说呢,这CM让我学到了不少,其实搞出来后感觉不难,就是有不少FPU浮点相关的指令和FPU寄存器完全没学过,查了不少资料,学到了很多 打开是这样 无壳程序,我们直接od ...
- Java日期时间(Date/Time)
获取当前日期和时间 在Java中容易得到当前的日期和时间.可以使用一个简单的Date对象的toString()方法,如下所示打印当前日期和时间: import java.util.Date; publ ...
- activiti 5.13流程图连线名称不显示bug修复
使用modeler设计器,流程图连线名称是有显示的,但是运行结果却没显示.找到网上2遍文章,说是activiti框架中的一个bug,要修改 DefaultProcessDiagramGenerator ...
- springboot配置redis
https://www.cnblogs.com/xiaoping1993/p/7761123.html https://www.cnblogs.com/gdpuzxs/p/7222309.html s ...
- [LightOJ 1370] Bi-shoe and Phi-shoe(欧拉函数快速筛法)
题目链接: https://vjudge.net/problem/LightOJ-1370 题目描述: 给出一些数字,对于每个数字找到一个欧拉函数值大于等于这个数的数,求找到的所有数的最小和. 知识点 ...
- GPIO实验之c语言
上一章节进行实验使用的是汇编进行编程的,本次实验是使用c语言进行编写的. (1)点亮一个led灯 1)启动文件: crt.S .text .global _start _star ...
- (转载)Navicat Premium 12.1.16.0安装与激活
声明:本文所提供的所有软件均来自于互联网,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 本文介绍Navicat Premium 12的安装.激活与基本使用.已于20 ...
- 【C#】非常重要的泛型
泛型 为什么要有泛型, 在没有泛型之前, 什么东西充当了泛型的作用? 在泛型出现之前, 代码中会有很多需要强制转换的地方. 比如 int a = (int) object, 对于这样类似的代码, 编译 ...
- Centos 7下添加新用户并授权
1.创建一个 xiaoyang 用户 [root@VM_81_181_centos ~]# adduser xiaoyang 2.为创建的用户设置密码 [root@VM_81_181_centos ~ ...