zoukankan      html  css  js  c++  java
  • 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!完美解决!

  • 相关阅读:
    EL表达式格式化日期
    EL表达式格式化日期
    Jquery中find与each方法使用详解
    Jquery中find与each方法使用详解
    快递100接口使用
    快递100接口使用
    android 中context的具体作用和意义
    startactivityforresult使用
    android 获取sharedpreference的三种方法的区别
    关于contentprovider的几个问题
  • 原文地址:https://www.cnblogs.com/leona-d/p/10685814.html
Copyright © 2011-2022 走看看