Vue + ts ios软键盘收起后页面底部留白 / 弹窗popup input focus以及点击事件不对应

本文介绍了一种解决iOS设备上软键盘收起后页面底部出现空白及弹窗input焦点与点击事件不匹配的问题。通过自定义Vue指令监听软键盘收起状态，实现页面自动回滚至底部，确保用户体验流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试手机为 iphone XR ios 13

在输入框输入完内容后，当点击软键盘的完成或者收起软键盘后，页面底部会有一部分区域变成空白；
在弹窗 popup 中有输入框的话，输入完成收起软键盘时，popup会回到原来的位置，但是弹窗上的input focus和弹窗上的点击事件并不是对应生效。

码农一抓一大把，一找大神一个准；大神一直有，为何我却不是其中一个。

苦力寻找，终于找到一个我这个菜鸟能理解并掌握的。

原理还是利用自定义的指令和监听软件盘的收起状态，将页面回滚到底部(个人比较喜欢省事和便捷的方案)。

iosScroll.ts

import Vue from "vue";
Vue.directive("resetPage", {
  inserted: () => {
    document.body.addEventListener("focusout", ()=>{
      //  检测是否为ios 系统，在此次项目中去除了检测并没有异常
      if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
        //软键盘收起的事件处理
         window.scrollTo(0,0)；
      }
    })
  }
})

这就算是定义好了指令了，只需在main.ts 中引入就行了

import "../../scripts/iosScroll";

最后在输入框中使用

<input v-reset-page v-model="detail" type="textarea" placeholder="具体信息">

码完收工，下班！

另外附上将页面滚动到顶部或者底部亦或是滚动一点点，咱也不知道后续产品会提啥我想K TA的需求出来。

import Vue from "vue";

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

附上原创链接，尊重大佬成果。
https://blog.youkuaiyun.com/zgh0711/article/details/89562566