问题描述:

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微信端软键盘收起后界面按钮失效问题的更多相关文章

  1. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  2. Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题

    本文为原创文章,转载请标明出处 今天做了一个如下图所示的页面. iOS 端毫无 bug,Android 端却出现了问题.当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看, ...

  3. ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

    input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){   setTimeout(() => {    co ...

  4. h5 ios移动端,键盘收起以后页面不归位

    $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function() ...

  5. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  6. IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...

  7. H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  8. input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置

    H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...

  9. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

随机推荐

  1. C++ 中的空格

    C++ 中的空格只包含空格的行,被称为空白行,可能带有注释,C++ 编译器会完全忽略它. 在 C++ 中,空格用于描述空白符.制表符.换行符和注释.空格分隔语句的各个部分,让编译器能识别语句中的某个元 ...

  2. 嵌入式驱动开发之usb 无线网卡驱动---RT2870STA dm368

    RT2870STA 368的无线网卡驱动! http://www.linuxidc.com/Linux/2014-02/96979.htm

  3. php Laravel 框架之建立后台目录

    今天研究了在Laravel框架中的控制器中加入后台的目录.发现了一些小的规律,拿来和大家分享一下吧. 通常情况下,我们是直接在controllers目录中加入我们的控制器,然后再routes.php ...

  4. 【Java集合的详细研究5】Java中Array与ArrayList的主要区别

    1)精辟阐述:可以将 ArrayList想象成一种“会自动扩增容量的Array”. 2)Array([]):最高效:但是其容量固定且无法动态改变:     ArrayList:  容量可动态增长:但牺 ...

  5. SharePoint Server 2013 通过IP无法访问站点

    通过IP访问SharePoint站点,出现“The Web application at http://172.21.19.132:1000 could not be found.... ”如下错误: ...

  6. 【Mysql】修改最大连接数

    http://www.111cn.net/database/mysql/51934.htm

  7. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Buff系统的实现

    BUFF是很多游戏都在采用的一种临时增益机制.本文讲述如何在基于关系型数据库的网页游戏中实现这一系统:如何扩展该系统:以及如何提高该系统的性能. 引言 BUFF是很多游戏都在采用的一种临时增益机制:与 ...

  9. Unity3D手机平台分辨率自动匹配教程

    1. 下载NGUI 2. 导入NGUI package到Unity. 这时候菜单上会出现NGUI的菜单栏: 3. 将默认的Main Camera删掉,通过菜单栏NGUI->Create新建一个2 ...

  10. Nginx(三)-- 配置文件之日志管理

    1.日志文件的默认存放位置 默认的日志文件存放位置在:nginx/logs/ 文件夹下,logs文件夹下有:access.log   error.log   nginx.pid 文件 2.nginx. ...