微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法
因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了。我的处理办法就是在键盘弹起和消失的时候,让页面都回到弹起之前的状态,使用了window.scrollTo方法。
keyUpClose () {
let u = navigator.userAgent;
let state; // 记录状态当关闭键盘时平滑滚动(smooth)一次页面
let myFun;
let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIos){
document.body.addEventListener('focusin', () => { //软键盘弹起事件
state=true;
clearTimeout(myFun);
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
state=false;
if(!state){
myFun= setTimeout(function(){
window.scrollTo({top:scrollTop,left:0,behavior:"smooth"})//重点 ----当键盘收起的时候让页面回到原始位置(这里的top:scrollTop
回到了弹窗弹起前状态)
},200);
}else{
return
}
})
}else{
return
}
}
微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法的更多相关文章
- 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题
1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...
- Html中让输入框input和紧接在后的按钮button在垂直方向上对齐
<table border="0px" width="360px"> <tr><td colspan="10" ...
- iOS中dyld缓存的实现原理是怎样的?
在iOS开发中,为了提升系统的安全性,很多系统库文件都被打包到一个缓存的文件当中即dyld缓存,那大家对dyld缓存了解多少呢?今天小编将和大家分享的就是一位iOS大神对dyld缓存的使用分析,一起来 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果
介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...
- 手摸手教你微信小程序开发之自定义组件
前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 仅Firefox中A元素包含Select时点击Select不能选择option
这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...
- Android 项目中常用到的第三方组件
项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...
随机推荐
- 小白学 Python(9):基础数据结构(列表)(上)
人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...
- 2019.10.29 CSP%您赛第四场t2
我太菜了我竟然不会分层图最短路 ____________________________________________________________________________________ ...
- Redis备忘(二)
内存回收: 有时候发现10g的Redis删掉1g的key,内存占用没啥变化,因为内存页分配,有的页面可能还存在key,整个页面不能回收. 主从同步: CAP原理:一致性 可用性 分区容忍性 redis ...
- 继承+派生+分类+钻石继承(day20)
目录 昨日内容 面对对象编程 类 定义类时发生的事情 调用类时发生的事情 init 对象 对象查找类的属性的顺序 对象的绑定方法 python中万物皆对象 今日内容 继承 什么是继承 为什么要继承 如 ...
- 用node实现发送邮箱验证码
首先,你需要注册一个支持发送的邮箱,我注册是网易邮箱,然后配置smtp. 然后,创建一个node项目,输入npm install nodemailer --save安装邮件依赖. 接着创建一个文件(s ...
- java 项目时间和服务器时间不一致
今天线上项目关于时间的几个任务都出了问题,查看日志发现日志的时间不对,用的是log4j,日志输出的时间都早了很长时间. 1 首先先登上服务器查看了服务器的系统时间 linux下 date命令 时间正确 ...
- python经典算法面试题1.5:如何找出单链表中的倒数第K个元素
本题目摘自<Python程序员面试算法宝典>,我会每天做一道这本书上的题目,并分享出来,统一放在我博客内,收集在一个分类中. [微软笔试题] 难度系数:⭐⭐⭐ 考察频率:⭐⭐⭐⭐⭐ 题目描 ...
- Abp vNext 自定义 Ef Core 仓储引发异常
问题 在使用自定义 Ef Core 仓储和 ABP vNext 注入的默认仓储时,通过两个 Repository 进行 Join 操作,提示 Cannot use multiple DbContext ...
- activmq点对点(简单写法)
开发环境 我们使用的是ActiveMQ 5.11.1 Release的Windows版,官网最新版是ActiveMQ 5.12.0 Release,大家可以自行下载,下载地址. 需要注意的是,开发时候 ...
- JS 原生面经从入门到放弃 篇幅较长,建议收藏
前言 是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http. 函数 ...