IOS微信端软键盘收起后界面按钮失效问题

问题描述：

1.在vue里封装了一个confirm的弹窗（即如下一个弹窗）

2.发现在IOS微信客户端中打开后，当需要在表单中输入内容的时候，很自然的点击了键盘右上角的【完成】按钮

3.啊~~~，惊人的发现惊人弹窗里所有的按钮全部失效了，一点反应都没有

4.但是，发现只要不是使用的封装好confirm的弹窗，而是直接写入到页面中内容（即使用vue slot这个的时候就不会出现这个情况）

5.于是乎，我开始查阅度娘，最终在 https://www.jianshu.com/p/ba9cfaeef88d 找到了解决方法。

综合下解决方案：

 1   /**
 2    * Js修復方法
 3    * @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
 4    * @param {Boolean} isSelect 需要修复的元素对象是否为“select”标签
 5    */
 6   function jsIosWechatPopFormFix(el, isSelect) {
 7     if (!el) return false;
 8     var resEl;
 9     var elSelector = el.charAt(0);
10     var elString = el.slice(1);
11     var listenEvent = isSelect ? 'change' : 'blur';
12     switch (elSelector) {
13       case '.': resEl = document.getElementsByClassName(elString);
14         break;
15       case '#': resEl = document.getElementById(elString);
16         break;
17       default: resEl = document.getElementsByName(el);
18     }
19     resEl.addEventListener(listenEvent, function () {
20       window.scroll(0, 0);
21     })
22   }
23   jsIosWechatPopFormFix('input');
24   jsIosWechatPopFormFix('textarea');
25   jsIosWechatPopFormFix('select', true);

 1   /**
 2    * Jq修復方法
 3    * @param {String} el 需要修复元素id(#)、class(.)或html标签字符串
 4    * @param {Boolean} isSelect 需要修复的元素对象是否为“select”标签
 5    */
 6   function jqIosWechatPopFormFix(el, isSelect) {
 7     if (!el) return false;
 8     var resEl = $(el);
 9     var listenEvent = isSelect ? 'change' : 'blur';
10     resEl.on(listenEvent, function () {
11       window.scroll(0, 0);
12     });
13   }
14   jqIosWechatPopFormFix('input');
15   jqIosWechatPopFormFix('textarea');
16   jqIosWechatPopFormFix('select', true);

 1 <!--Vue修復方法-->
 2 <textarea placeholder="请输入您取消的原因" @blur="window.scroll(0,0)"></textarea>
 3 <input type="text" placeholder="请输入您取消的原因" @blur="window.scroll(0,0)" />
 4 <select @change="window.scroll(0,0)">
 5   <option>1</option>
 6   <option>2</option>
 7 </select>
 8 
 9 <!--Html or Vue通用修復方法-->
10 <textarea placeholder="请输入您取消的原因" onblur="window.scroll(0,0)"></textarea>
11 <input type="text" placeholder="请输入您取消的原因" onblur="window.scroll(0,0)" />
12 <select onchange="window.scroll(0,0)">
13   <option>1</option>
14   <option>2</option>
15 </select>

ok！完美解决！

扫描二维码关注公众号，回复： 5839680 查看本文章