因为在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中按钮无效处理办法的更多相关文章

  1. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  2. Html中让输入框input和紧接在后的按钮button在垂直方向上对齐

    <table border="0px" width="360px"> <tr><td colspan="10" ...

  3. iOS中dyld缓存的实现原理是怎样的?

    在iOS开发中,为了提升系统的安全性,很多系统库文件都被打包到一个缓存的文件当中即dyld缓存,那大家对dyld缓存了解多少呢?今天小编将和大家分享的就是一位iOS大神对dyld缓存的使用分析,一起来 ...

  4. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  5. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  6. 手摸手教你微信小程序开发之自定义组件

    前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现 ...

  7. 基于JQ的自定义弹窗组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  9. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

随机推荐

  1. C#扩展一般用于linq

    下面是dictionary的扩展 using System.Collections.Generic; namespace NetAnalysis.Common { public static clas ...

  2. python3.x以上 爬虫 使用问题 urllib(不能使用urllib2)

    问题一: python 3.x 以上版本揽括了 urllib2,把urllib2 和 urllib 整合到一起. 并且引入模块变成一个,只有 import urllib # import urllib ...

  3. 深入全面探究有未经处理的异常: 0xC00000FD: Stack overflow(栈溢出)问题!

    这两天一直遇到标题上的问题,我相信很多朋友在执行代码的时候都会遇到这样的问题,我在网上也找了很多的资料解决这个问题,虽然有些方法能解决,但是总觉得总结的不是很全面,这里我自己在相对全面的总结一下,如果 ...

  4. 总结Java equals()和hashCode()的联系

    Java equals()和hashCode()的联系 如果两个对象是相等的,那么它们必须有相同的哈希码. 如果两个对象具有相同的哈希码,他们可能相等,可能不相等. 如果两个对象是不同的类的实例 他们 ...

  5. day27作业

    FTP需求 客户端可以注册登录 client:输入一个login sever:执行login 客户端登陆后可以选择文件夹上传与下载 client:输入一个upload,download sever:执 ...

  6. day03课堂练习

    简述变量的组成 变量由变量名,赋值符号,和变量值三个部分组成 简述变量名的命名规范 a.变量名必须有意义,要能反映变量值所描述的状态 b.变量名以字母.数字和下划线组成,不能用数字开头 c.不能以关键 ...

  7. hash算法的应用

    一.单词模式匹配 描述:单词模式字符串为“一二二一”,目标字符串为"苹果 香蕉 香蕉 苹果"则匹配成功 a=[1,2,2,1,1,3] b=['x','y','y','x','x' ...

  8. Kruskal算法求最小生成树 笔记与思路整理

    整理一下前一段时间的最小生成树的算法.(其实是刚弄明白 Kruskal其实算是一种贪心算法.先将边按权值排序,每次选一条没选过的权值最小边加入树,若加入后成环就跳过. 先贴张图做个示例. (可视化均来 ...

  9. Git学习笔记----基础运用

    安装Git Windows: 进入官网下载或百度网盘下载 Git(V2.23_x64) 提取码:uf2x Ubuntu: sudo apt-get -install git 安装完成之后打开git命令 ...

  10. oop面向对象知识总结 静态成员和友元

    第十一章 静态成员和友元 11.1 静态成员 1.C++类当中的静态数据成员仍借用保留字static,但是与之前的静态全局变量,静态局部变量以及静态函数没有关系. 2.静态数据成员不占用具体对象的数据 ...