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

  • 相关阅读:
    如何修改配置文件:CentOS下SSH端口修改
    linux ssh_config和sshd_config配置文件学习
    linux文件权限命令chmod学习
    硬盘接口类型介绍
    Linux中权限(r、w、x)对于目录与文件的意义
    谈谈对虚拟DOM的理解
    对于深入响应式原理的深刻理解
    环套树 or 基环树 找环
    POI 2014 little bird
    洛谷P2876 [USACO07JAN]解决问题Problem Solving
  • 原文地址:https://www.cnblogs.com/leona-d/p/10685814.html
Copyright © 2020-2023  润新知