1、项目背景：vue项目，手机加短信验证码登录；
2、问题： 在ios中input吊起软键盘，输入完成后，收起软件盘，页面不会回弹，导致页面下方出现空白，也就是页面变形；
3、最开始的解决方案是，用input的失去焦点事件@focusout，在input失去焦点的时候让页面回滚到顶部，具体代码如下：
// 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。 if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === ‘input‘) { window.scrollTo(0, 0) }
这样可以解决页面变形问题，但是切换input的时候，会出现页面先滚动然后又回到光标位置，就是页面先执行了失去焦点事件，回到顶部，然后input又获取焦点，重新回到当前位置；
表现形式如下：
4、最终优化方案是：用定时器延时执行@focusout，在添加一个@focusin事件；
如果是input切换，则直接取消定时器，不在执行回到顶部的代码，这样页面就不会回滚；
如果时输入完成，则延时20ms后再回到页面顶部，这样完美解决该问题；
具体代码如下：
<div class="login" v-if="isLogin" @focusout="handleInputBlur" @focusin="handleInputBin"> <div> <input class="phone" v-model="phone" type="number" placeholder="请输入"> </div> <div class="sms-body"> <div> <input class="sms" type="number" placeholder="请输入"> </div> <div> <button class="smsBtn" v-if=‘sendAuthCode‘ @click="handleGetSms">{{smsBtn}}</button> <button class="timeBtn" v-else >{{smsBtn}}</button> </div> </div> <div> <button class="post-phone-btn" @click="handlePostBtn">绑定</button> </div> </div>
// 针对ios键盘导致页面变形的处理----冒泡获取所有失去焦点事件
// 将获得失去焦点时间延时执行，如果再重新获取焦点则清除定时器，不将页面回滚到顶部，避免出现页面来回滚动的情况
// 如果输入完成之后，没有在重新获取焦点，则延时20ms后再将页面回弹到顶部
handleInputBlur (e) {
if (this.timer) {
clearTimeout(this.timer)
}
// 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。
if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === ‘input‘) {
this.timer = setTimeout(() => {
window.scrollTo(0, 0)
}, 20)
}
},
// 获得焦点事件
handleInputBin (e) {
if (this.timer) {
clearTimeout(this.timer)
}
}