js - 解决微信环境下,ios软键盘收起后页面空白
思路:1.判断是否在微信中
2.判断是否在ios中
3.表单元素焦点将页面滚回到顶部
是否是微信环境
isWx() { let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串 console.log(ua); if (ua.indexOf("micromessenger") > -1) { return true; } else { return false; } },
是否是ios终端
isIos(){ let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串 console.log(ua); if (ua.indexOf("iphone") > -1 || ua.indexOf("ios") > -1) { return true; } else { return false; } },
焦点消失滚动到顶部解决留白
// 解决微信环境,ios下,键盘收起留白问题 fixScroll() { if (this.isWx() && this.isIOS()) { console.log("解决留白"); window.scrollTo({top: 0, left: 0, behavior: 'smooth'}) } },
使用:
<input type="text" @blur="fixScroll" v-model="graphicsCode" name="graphicsCode" placeholder="请输入图形验证码" />
一步一叩首,今天的自己比昨天好一点就行,明天的自己需追寻