ios输入框聚焦问题

众所周知，ios下的网页有个特性——不允许JS自动获取input输入框的焦点并调出虚拟键盘，归根结底是聚焦事件的触发源头必须是用户，所以我们不管怎么模拟click再focus都是无效的。

这儿记录一下为什么用户点击了页面的按钮，input.focus()仍然无效，demo如下

<template>
  <div id="app">
    <input type="text" ref="input" v-if="show"/>

    <button ref="button">focus22</button>
  </div>
</template>

export default {
  name: "App",
  data() {
    return {
      show: false,
    }
  },
  mounted() {
    this.$refs.button.addEventListener('click', (e) => {
      this.show = !this.show;
      setTimeout(() => {
        this.$refs.input.focus();
      }, 100);
    });
  }
};

setTimeout会改变聚焦事件的触发源头，所以只要换成$nextTick就ok了。

this.$refs.button.addEventListener('click', (e) => {
      this.show = !this.show;
      this.$nextTick(() => {
        this.$refs.input.focus();
      })
});

但是有些小伙伴会发现仍然无效！！！？？？？

这时，你可以更改一下事件的绑定方式，将你的@click的写法改成如下的方式，应该就ok了~

this.$refs.button.addEventListener('click', (e) => {});

vue路由跳转后的自动聚焦可以参考这篇文章 javascript - IOS input auto focus 解决方案探究 - 个人文章 - SegmentFault 思否