微信中使用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 ...
随机推荐
- 10个让你受益匪浅的css使用技巧
1. Safari 3D变换会忽略z-index的层级 在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器) ...
- windows下Eclipse远程连接linux hadoop远程调试 经验(一)
环境 Windows 7 64bit JDK 1.6.0_45 (i586) JDK 1.7.0_51 (i586) Eclipse Kepler Eclipse -plugin-1.2.1.ja ...
- 数据类型(三) + 流程控制(一) day05
目录 昨日回顾 (三) 花式赋值 链式赋值 交叉赋值 (四) 列表list (五) 字典dict (六) 布尔值 (七) 解压缩 (八) python与用户交互的方式 (九) 三种格式化输出的方式 f ...
- 课堂动手动脑验证以及自定义异常类实现对异常处理——java异常类
异常(exception):发生在程序执行期间,表明出现了一个非法运行的情况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象.例如:数组越界和被0除. 代码验证: package test ...
- Veins(车载通信仿真框架)入门教程(四)——调试及记录结果
Veins(车载通信仿真框架)入门教程(四)——调试及记录结果 在Veins入门教程(三)最后的动图中(如下图)可以看到大大小小的光圈,这个怎么实现的呢? 很简单,以收到RTS消息为例,通过finHo ...
- jquery复习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Life is short, I love Python~!
python学习目录 一:计算机基础 计算机基础 二:python基础 python基础 三:函数 函数 内置函数匿名函数 迭代器生成器 四:文件处理&异常 文件处理 异常处理 五:模块 常用 ...
- 死磕 java线程系列之线程池深入解析——定时任务执行流程
(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:本文基于ScheduledThreadPoolExecutor定时线程池类. 简介 前面我们一起学习了普通 ...
- centos7 搭建ftp 并配置用户目录
1.如果是阿里云服务器,登录控制后台,配置规则,开启21端口 (sftp是加密文件传输使用的22端口,我们这几是搭建ftp服务器) 2.安装配置vsftp服务器 一.配置防火墙,开启FTP服务器需要的 ...
- 学习笔记14Js使用技巧
**页面加载完毕时执行一段代码$(fuction(){ initialMethod(); }); *将一个<form>序列化为json对象并传给服务器var postData = $(&q ...