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