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！完美解決！