ios h5中在fixed元素中的input被focus时，键盘遮挡input (van-popup、van-feild)

问题描述：

前提： 我使用的是vant组件库，其中一个页面中有一个van-popup组件，van-popup组件中又嵌套了一个van-field组件
预期结果： 当点击van-feild输入框时，键盘弹起，输入框显示在键盘上方
**实际结果：**当van-popup打开时，首次点击van-field时，键盘将van-popup遮挡，导致输入框中内容不可见。失去焦点再次点击后，van-popup被顶起。如果关闭van-popup，则会重复前面的情况

下方视频可以看看直观效果：

键盘遮挡输入框

问题分析与尝试过程：

之前遇到过类似的问题，当时是由于popup的高度导致的，修改高度就解决了所以刚开始我也以为是高度的问题，发现调整了van-popup的高度并没有什么效果
试了安卓手机发现安卓上没有问题由此可见是ios特有
查看是否是vant组件库的问题，看了github issues发现类似问题但是issue只发生在了ios13上，我手中的ios16还是存在该问题，也用了上面提供的各个方法没有解决
又看到了有人用van-popup的get-container属性解决了，挂载在body或者#app下，我尝试了以后发现测试机器8plus确实ok了，但是我手里的13pro变成偶现了
焦急万分的我google一大堆，有使用scrollIntoView进行滚动的，还有监听resize手动滚动的，针对我的问题都没能解决
最后看到了参考文档1中的方式，发现无论在我的手机上还是低版本的ios上都没有再出现该问题，到这里我以为是大功告成了，认为此bug已修复

以上步骤都是2024.12.10日当天经历的，下面也就是今天2024.12.12日经历的

测试提了个bug，说输入框无法左右移动光标了，我十分天真地觉得这个光标是可以有原生方法设置的，不错确实有设置光标位置的，但是只是设置固定的位置，而我在6的方法中是阻止了默认行为，导致长按无法根据手指方向移动光标了，但是我依旧没死心啊，又问了各大ai，结果ai给的回答都是修改解决遮挡问题的办法，又回到了之前
我让ai给我分析为什么我使用的办法会让光标无法移动，它说因为阻止了默认行为，我有说我只有第一次这样，能不能在这个方法的基础上得到解决，它终于给出了一个用的上的方式，那就是只有在首次点击的时候才阻止默认行为
我回想到两天前解决的时候，发现在van-popup父组件中用v-if来控制van-popup的显示时，被遮挡的概率将会大大降低，再结合今天看了很多ios处理软件盘的流程的文档后，我找到了更简单的方法，就是在父组件中就用v-if控制van-popup显示，而van-popup中控制显示的属性将一直为true，至此我得到了两种解决方式，这一种在我自己看了最简单

解决方法：

方案一： 给van-feild添加touchstart.native事件

javascript 复制代码

<template>
  <van-popup
    position="bottom"
    class="popup"
    get-container="#app"
    :value="show"
    :overlay-style="{ background: 'rgba(0,0,0,0.5)' }"
    :close-on-click-overlay="false"
  >
    <van-field ref="fieldRef" class="field" type="email" maxlength="100" clearable v-model="email" placeholder="请输入邮箱" @touchstart.native="onInputTouch"/>
  </van-popup>
</template>

<script>
import { Popup, Loading, Toast, Field } from 'vant';

export default {
  components: {
    [Popup.name]: Popup,
    [Loading.name]: Loading,
    [Field.name]: Field,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      email: '',
      isFocused: false
    }
  },
  watch: {
    show: {
      handler(val) {
        if(val && this.isFocused) {
          this.isFocused = false;
        }
      },
      immediate: true
    }
  },
  methods: {
    onInputTouch(e) {
      if (!this.isFocused) {
        e.preventDefault();
        e.target.focus();
        this.isFocused = true;
        return;
      }
      this.isFocused = true;
    }
  }
};
</script>

**方案二(最终使用)：**用v-if控制van-popup的显示，van-popup本身的show属性默认设置为true

参考文档：

1.van-popup 在ios手机上被键盘遮盖问题（使用该方法解决了遮挡，但是光标无法左右移动）

不如刷新认识移动端软键盘出现带来的网页问题（详细介绍了ios软键盘引发问题的原因）
别再用不规范的方法来解决软键盘遮挡输入框问题了
Keyboard Management（说明了ios webkit如何处理键盘事件和视图布局）
Handling the Virtual Keyboard（详细说明了ios safari中虚拟键盘的行为）