IOS微信端软键盘收起后界面按钮失效问题
问题描述:
1.在vue里封装了一个confirm的弹窗(即如下一个弹窗)
2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的【完成】按钮
3.啊~~~,惊人的发现惊人弹窗里所有的按钮全部失效了,一点反应都没有
4.但是,发现只要不是使用的封装好confirm的弹窗,而是直接写入到页面中内容(即使用vue slot这个的时候就不会出现这个情况)
5.于是乎,我开始查阅度娘,最终在 https://www.jianshu.com/p/ba9cfaeef88d 找到了解决方法。

综合下解决方案:
/**
* Js修復方法
* @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
* @param {Boolean} isSelect 需要修复的元素对象是否为“select”标签
*/
function jsIosWechatPopFormFix(el, isSelect) {
if (!el) return false;
var resEl;
var elSelector = el.charAt(0);
var elString = el.slice(1);
var listenEvent = isSelect ? 'change' : 'blur';
switch (elSelector) {
case '.': resEl = document.getElementsByClassName(elString);
break;
case '#': resEl = document.getElementById(elString);
break;
default: resEl = document.getElementsByName(el);
}
resEl.addEventListener(listenEvent, function () {
window.scroll(0, 0);
})
}
jsIosWechatPopFormFix('input');
jsIosWechatPopFormFix('textarea');
jsIosWechatPopFormFix('select', true);
/**
* Jq修復方法
* @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
* @param {Boolean} isSelect 需要修复的元素对象是否为“select”标签
*/
function jqIosWechatPopFormFix(el, isSelect) {
if (!el) return false;
var resEl = $(el);
var listenEvent = isSelect ? 'change' : 'blur';
resEl.on(listenEvent, function () {
window.scroll(0, 0);
});
}
jqIosWechatPopFormFix('input');
jqIosWechatPopFormFix('textarea');
jqIosWechatPopFormFix('select', true);
<!--Vue修復方法-->
<textarea placeholder="请输入您取消的原因" @blur="window.scroll(0,0)"></textarea>
<input type="text" placeholder="请输入您取消的原因" @blur="window.scroll(0,0)" />
<select @change="window.scroll(0,0)">
<option>1</option>
<option>2</option>
</select> <!--Html or Vue通用修復方法-->
<textarea placeholder="请输入您取消的原因" onblur="window.scroll(0,0)"></textarea>
<input type="text" placeholder="请输入您取消的原因" onblur="window.scroll(0,0)" />
<select onchange="window.scroll(0,0)">
<option>1</option>
<option>2</option>
</select>
ok!完美解决!
IOS微信端软键盘收起后界面按钮失效问题的更多相关文章
- web中ios移动端软键盘收起后,页面内容留白不下滑
微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...
- Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题
本文为原创文章,转载请标明出处 今天做了一个如下图所示的页面. iOS 端毫无 bug,Android 端却出现了问题.当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看, ...
- ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){ setTimeout(() => { co ...
- h5 ios移动端,键盘收起以后页面不归位
$('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function() ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
- html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)
// html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...
随机推荐
- -lpthread和-pthread的区别
编译程序包括 预编译, 编译,汇编,链接,包含头文件了,仅能说明有了线程函数的声明, 但是还没有实现, 加上-lpthread是在链接阶段,链接这个库.<stdio.h>等都是静态库,不需 ...
- ioc和aop的区别?
ioc:控制反转(Inversion of Control,英文缩写为IoC)把创建对象的权利交给框架,是框架的重要特征,并非面向对象编程的专用术语.它包括依赖注入(Dependency Inject ...
- 【Java面试题】51 什么时候用assert。
assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制. 在实现中,assertion就是在程序中的一条语句,它对一个boolean表达式进行检查,一个正确程序必须保 ...
- mysql 异常 Lock wait timeout exceeded; try restarting transaction;expc=java.sql.SQLExcept
这种一般是等锁超时了,可以设置延长等锁时间. mysql> set innodb_lock_wait_timeout=100 Query OK, 0 rows affected (0.02 se ...
- [python每日一库]——hotshot
High performance logging profiler 官方文档:http://docs.python.org/2/library/hotshot.html#module-hotshot ...
- [转]五分钟看懂UML类图与类的关系详解
在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...
- rpm源码安装mysql
1)访问官网(mysql社区服务器) http://downloads.mysql.com/archives/community/ 2)选择自己需要的版本和对应服务器(例如 服务器是centos 6. ...
- iOS事件拦截(实现触摸任意位置隐藏指定view)
项目里有一个需求,类似新浪或者腾讯微博的顶部title栏的类别选择器的消失(在选择器展开的时候,触摸屏幕任何地方使其消失). 最开始的想法是当这个选择器(selectorView)展开的时候,在当前屏 ...
- linux配置了dns后导致mysql远程连接慢问题
有时候dns配置错误或者其它原因会导致mysql远程连接缓慢,此时只需要关闭mysqlDNS反向解析即可解决此问题. 打开my.cnf配置,将[mysqld]下的#skip-name-resolve前 ...
- C++ 在继承中使用virtual
使用virtual:如果方法是通过引用类型或指针而不是对象调用的,它将确定使用哪一种方法.如果没有使用关键字irtual,程序将根据引用类型或指针类型选择方法:如果使用了irtual,程序将根据引用或 ...