微信中使用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 ...
随机推荐
- Smali语言基础语法
1.Smali语言基础语法-数据类型与描述符 smali中有两类数据类型:基本类型和引用类型.引用类型是指数组和对象,其它都是基础类型. 基本类型以及每种类型的描述符: Java类型 类型描述符 说明 ...
- 设计模式(四)Factory Method模式
简单来说,用Template Method模式来构建生成实例的工厂,就是Factory Method模式.在这个模式中,父类决定实例的生成方式,但不决定所要生成的具体的类,具体的处理全部交给子类负责. ...
- UI控件拖动失效
问题描述:ui Slider滑块点击时需要特效,直接在滑块上添加OnPointerDown事件与OnPointerUp事件,但是当拖动时会直接触发OnPointerUp事件,而且拖动相关的事件失效 原 ...
- net core WebApi——公用库April.Util公开及发布
前言 在之前鼓捣过一次基础工程April.WebApi后,就考虑把常用的类库打包做成一个公共类库,这样既方便维护也方便后续做快速开发使用,仓库地址:April.Util_github,April.Ut ...
- 前端技术之:JS开发几个有意思的东东
一. 查看性能分析报告 npm run build:prod --report 二.vue ui工具 三.vue-element-admin https://panjiachen.gite ...
- NOIP模拟12
也算是最近几次比较水的一次吧. 考试时看T1像个打表找规律的题,扔了,去看T2,带修莫队??不会,完戏.看了T3,我决定还是去看T1. 看着T1,我突然发现T2是个大水题:主席树就行,不带修,修改时只 ...
- 【java基础】程序员你真的理解反射机制吗?
目录 前言 1.反射的概述 2.正式使用反射之前很有必要了解的Class类 3.反射的使用 前言 很多讲解反射的博客文章并没有详细讲解Class类,~当然包括之前的我也一样~,这样的文章只会让反射徒有 ...
- CentOS7 reset脚本,用于初始化新的虚拟机
能用,有待完善 CentOS7测试 哈哈 #!/bin/bash #************************************************************** #Au ...
- PowerMock学习(一)之PoweMock的入门--模拟新增学生操作
关于powermock 在TDD领域Mock框架有很多,比如EasyMock,JMock,Mockito.可能有些同学会好奇了,为什么要重点把powermock拿出来呢,因为powermock可以解决 ...
- 大宇java面试系列(二):jvm组成部分
1. 说一下 JVM 的主要组成部分?及其作用? 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) 本地库接口(Na ...