解决Vue IOS调起键盘后页面底部留白的问题

键盘后页面底部留白的问题"/>

解决Vue IOS调起键盘后页面底部留白的问题

在vue开发中遇到了一个非常棘手的一个问题，就是标题所说的，在一个地图沉浸页中需要调起键盘让用户输入手机号，但是IOS部分机型会在键盘收起的时候，弹上去的部分不能全部落下，导致屏幕下边留白，并且按键全部错位。

<input ref="input" v-reset-page v-focus type="tel"placeholder="请输入手机号码">

解决方法就是用到了vue的自定义指令，创建一个自定义指令让键盘收起时scroll强制变成0，问题就解决了。

resetPage: {inserted: function (el) {document.body.addEventListener('focusout', () => {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {//软键盘收起的事件处理setTimeout(() => {const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0window.scrollTo(0, Math.max(scrollHeight - 1, 0));}, 100)}});}}

此文是摘抄一位大佬的文章。

原文：