1. 背景

在 H5 的开发中，有一个需求是点击了某个元素， 需要将焦点聚焦到其他input元素上， 在实际调用过程中， 发现在安卓端可以实现目标，但是在 IOS 中无法实现目标。

2. 原理

2.1 原因

苹果政策限制，不允许自动 focus；只有用户触发的 focus 事件才会生效。

触屏设备上的 Safari 中 focus()有些限制。苹果触屏设备为表单获焦软键盘弹出设置了个条件：

1. 屏幕被点击。（事件源： input 、其他元素）

• 点击 input 调用 focus()或 click()方法使其他 input 获焦
• 点击其他元素然后在点击事件处理函数中使其他 input 获焦。

2.2 探索场景细分

1. 触发的元素

• contenteditable = true
• contenteditable = false

2. 目标元素展示时机

• 已存在
• 重新渲染 （不同路由、同一路由更新、同一路由不更新）

3. focus 执行时机

• 同步
• 异步

2.3 示例 demo

示例中注释掉的是触发跳转第二个路由的元素。

这是 IOS input聚焦验证页

切换为false

contenteditable = false元素触发(同步)

点我：同一页面

contenteditable = false元素触发(异步)

点我：同一页面

contenteditable = true元素触发(同步)

contenteditable = true元素触发(异步)

聚焦代码演示

<template>
  <div class="demo">
    <p>这是 IOS input聚焦验证页</p>
    <div
      title="切换div元素状态"
      class="custom-btn"
      @click="isEdit = !isEdit"
    >
      切换为{{ isEdit }}
    </div>
    <div class="box">
      <p>
        contenteditable = <em>{{ isEdit }}</em
        >元素触发(同步)
      </p>
      <div :contenteditable="isEdit" class="btn" @click="test1">
        点我：同一页面
      </div>
      <!-- <div :contenteditable="isEdit" class="btn" @click="test11">
        点我：不同页面
      </div> -->
      <input type="text" id="input1" />
    </div>
    <div class="box">
      <p>
        contenteditable = <em>{{ isEdit }}</em
        >元素触发(异步)
      </p>
      <div :contenteditable="isEdit" class="btn" @click="test2">
        点我：同一页面
      </div>
      <!-- <div :contenteditable="isEdit" class="btn" @click="test22">
        点我：不同页面
      </div> -->
      <input type="text" id="input2" />
    </div>
    <div class="box">
      <p>contenteditable = true元素触发(同步)</p>
      <input type="text" @click="test3" placeholder="这是input，同一页面" />
      <!-- <input type="text" @click="test33" placeholder="这是input，不同页面" /> -->
      <input type="text" id="input3" />
    </div>
    <div class="box">
      <p>contenteditable = true元素触发(异步)</p>
      <input type="text" @click="test4" placeholder="这是input，同一页面" />
      <!-- <input type="text" @click="test44" placeholder="这是input，不同页面" /> -->
      <input type="text" id="input4" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: null,
      input2: null,
      input3: null,
      input4: null,
      isEdit: false,
    };
  },
  mounted() {
    this.input1 = document.getElementById("input1");
    this.input2 = document.getElementById("input2");
    this.input3 = document.getElementById("input3");
    this.input4 = document.getElementById("input4");
  },
  methods: {
    test1() {
      this.input1.focus();
    },
    test11() {
      this.$router.push({
        path: "/test2",
        query: {
          sync: true,
        },
      });
    },
    test2() {
      this.$nextTick(() => {
        this.input2.focus();
      });
    },
    test22() {
      this.$router.push({
        path: "/test2",
        query: {
          sync: false,
        },
      });
    },
    test3() {
      this.input3.focus();
    },
    test33() {
      this.$router.push({
        path: "/test2",
        query: {
          sync: true,
        },
      });
    },
    test4() {
      this.$nextTick(() => {
        this.input4.focus();
      });
    },
    test44() {
      this.$router.push({
        path: "/test2",
        query: {
          sync: false,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
$size: 12px;
.btn {
  background: #409eff;
  padding: $size;
  border-radius: $size;
  color: white;
  cursor: pointer;
  &:hover {
    background: rgb(51.2, 126.4, 204);
  }
}

.demo {
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  .custom-btn {
    @extend .btn;
  }
  .box {
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: $size;
    border: 1px solid rgb(191, 180, 182);
    border-radius: $size;
    .btn {
      @extend .btn;
    }
    input {
      border: 1px solid #ccc !important;
      padding: 0 10px;
    }
    p {
      margin: 0;
    }
  }
}
</style>

3. 最佳实践

触发元素使用 input，异步执行 focus。

版权所有

版权归属：tuyongtao1

许可证：署名 4.0 国际 (CC-BY-4.0)