fix: ios wechat keyboard bug

Author: hua1995116

index.html

@@ -31,7 +31,7 @@
 
     gtag('config', 'UA-112201282-1');
 </script>
-<script src="//wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
+<script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
 <script>
     var debug = location.href.match(/debug=(\w+)/);
     if(debug && debug[1]) {

package.json

@@ -43,12 +43,12 @@
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
-    "babel-runtime": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "babel-runtime": "^6.26.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "cookie-parser": "^1.4.3",

src/main.js

@@ -11,6 +11,10 @@ import 'muse-ui/dist/muse-ui.css';
 import './styles/main.styl';
 import socket from './socket';
 import {queryString} from '@utils/queryString';
+import ios from './utils/ios';
+
+// 微信 回弹 bug
+ios();
 
 import vuePicturePreview from './components/photo-viewer';
 Vue.use(vuePicturePreview);

src/utils/ios.js

@@ -0,0 +1,34 @@
+export default function () {
+  const u = navigator.userAgent;
+  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
+  const classList = 'input';
+  setTimeout(() => {
+    [].forEach.call(document.querySelectorAll(classList), function(el) {
+      el.addEventListener("blur", function(e) {
+        console.log(1111);
+        if (isIOS) {
+          blurAdjust();
+        }
+      });
+    });
+  }, 1000);
+
+  // 解决苹果不回弹页面 https://blog.csdn.net/m0_37520980/article/details/86305488
+  function blurAdjust(e) {
+    setTimeout(() => {
+      if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
+        return;
+      }
+      let result = 'pc';
+      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
+        result = 'ios';
+      } else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
+        result = 'android';
+      }
+
+      if (result === 'ios') {
+        document.activeElement.scrollIntoViewIfNeeded(true);
+      }
+    }, 100);
+  }
+}

src/view/Chat.vue

@@ -19,16 +19,16 @@
           <mu-icon-button icon="people" slot="right" @click="openSimpleDialog"/>
         </mu-appbar>
       </div>
-      <div class="notice" v-if="noticeList.length > 0" :class="[noticeBar ? 'notice-hidden' : '']">
+      <!-- <div class="notice" v-if="noticeList.length > 0" :class="[noticeBar ? 'notice-hidden' : '']">
         <div class="notice-container">
           <div class="notice-li" v-for="(item, key) in noticeList" :key="key">
             <a :href="item.href">{{key + 1}}. {{item.title}}</a>
           </div>
         </div>
-        <!-- <div class="notice-tool-bar" @click="handleNotice">
+        <div class="notice-tool-bar" @click="handleNotice">
           {{noticeBar ? '显示通知' : '关闭通知'}}
-        </div> -->
-      </div>
+        </div>
+      </div> -->
       <div class="chat-inner">
         <div class="chat-container">
           <div v-if="getInfos.length === 0" class="chat-no-people">暂无消息,赶紧来占个沙发～</div>