微信中使用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 ...
随机推荐
- recovery模式差分(增量)升级小结
最近在做recovery模式下的升级,简单的总结一下. 先说说recovery模式,他是个升级小系统,有单独的kernel,通过特定的系统命令就可以进入到此系统中,选择进入正常系统的kernel还是r ...
- 数据结构(四十二)散列表查找(Hash Table)
一.散列表查找的基础知识 1.散列表查找的定义 散列技术是在记录的存储位置和它的关键字之间建立一个确定的对应关系f,使得每个关键字key对应一个存储位置f(key).查找时,根据这个确定的对应关系找到 ...
- mysql中if函数的正确使用姿势
--为了今天要写的内容,运行了将近7个小时的程序,在数据库中存储了1千万条数据.-- 今天要说的是mysql数据库的IF()函数的一个实例. 具体场景如下, 先看看表结构: CREATE TABLE ...
- 第二篇 Flask的Response三剑客及两个小儿子
一.Response三剑客 (一)Flask中的HTTPResponse @app.route("/") #app中的route装饰器 def index(): #视图函数 ret ...
- 外星人R7 1080Ti 装ubuntu两个巨坑
机器型号(Alienware R7):GTX1080ti,i7-8700 install ubuntu 16.04 坑一 ACPI Error: Namespace lookup failure AC ...
- ArcGIS Engine空间分析之缓冲区分析的实现
缓冲分析(BufferAnalysis)的结果是一个面状要素——即缓冲要素,点状要素.线状要素和面状要素,被缓冲分析功能处理过之后,它们的周围产生一个缓冲区域,该区域即新产生的面状要素. 在缓冲方向上 ...
- Chrome插件开发(三)
在日常工作中,我们可能经常需要在手机端测试我们所做的页面,如果每次在手机端测试都手输网址,网址短的还好,如果长的网址也需要一个字母一个字母去敲,那无疑是一场噩梦,试想我们有一个工具只需要点击一个按钮就 ...
- xml 需要转义的字符
XML实体中不允许出现"&","<",">"等特殊字符,否则XML语法检查时将出错,如果编写的XML文件必须包含这些字符 ...
- 还不会用FindBugs?你的代码质量很可能令人堪忧
前言 项目中代码质量,往往需要比较有经验的程序员的审查来保证.但是随着项目越来越大,代码审查会变得越来越复杂,需要耗费越来越多的人力.而且程序员的经验和精力都是有限的,能审查出问题必定有限.而在对代码 ...
- 大事祭——MiserWeyte
2019.9.10 QHDYZ组建信奥集训队祭(我哪知道这个鶸学校为啥这个时候组队) 2019.9.11 成为集训队毒瘤出题人祭 2019.9.21 博客界面优化祭(终于不是白底蓝框了)“那个拿剑的就 ...