父项

<template>
<div>
  <TextComp v-if='showText' />
  <button @click='showText = !showText'> Show/hide input </button>
</div>

</template>
 ...

子组件

<template>
<div>
   <input ref='focusMe' type='text'/>
</div>

</template>

<script>

export default {
  name: 'TextComp',
  mounted () {
    this.$refs.focusMe.focus()
  }
}

</script>

Answer 1

希望您现在已经找到解决方案。

但是我只想为像我这样的其他新用户添加此内容。

mounted () {
    this.$refs.focusMe.focus()       // sometime this doesn't work.
  }

尝试添加它。

this.$nextTick(() => this.$refs.focusMe.focus())

有关更多信息，请检查this

Answer 2

https://vuejs.org/v2/guide/custom-directive.html

在vue的官方指南中，它说自动对焦在移动Safari中不起作用。 When the page loads, that element gains focus (note: autofocus doesn’t work on mobile Safari).

在iOS移动浏览器中，focus()仅在响应用户互动（例如点击事件）时起作用。请参阅：Mobile Safari: Javascript focus() method on inputfield only works with click?

我猜为什么它在Vue中不起作用：

在您的Vue示例中，当您单击按钮时，它仅将watcher插入到batcher队列中。观察者具有有关需要更新的信息。您可以将其视为更新操作或更新事件。之后（几乎立即，在下一个滴答中），Vue从队列中读取（观察者），并随后更新虚拟dom。但是，这意味着您的代码focus()并非位于“点击”事件处理程序“内部”，而是在点击事件处理程序完成后执行。

尽管我不知道React的内部实现，所以无法解释为什么它在React示例中起作用。

Answer 3

您可以创建一个伪造的输入字段，并在单击事件期间将其聚焦。

<template>
   <div>
     <TextComp v-if='showText' />
     <button @click='onShowText'> Show/hide input </button>
     <input type="text" ref="dummykeyboard" style="opacity:0">
   </div>

</template>
<script>

export default {
  methods:{
    onShowText() {
      this.showText = !this.showText;
      this.$refs.dummykeyboard.focus();
    }
  }
}

</script>

Answer 4

我会采用这种解决方案，它对我有用。只需添加设置超时并将焦点方法放入其中

const data = ['a', 'b', 'c', 'd'],
      [last] = data.slice(-1);

console.log(last);

Answer 5

我建议在该字段而不是焦点上触发点击事件

this.showText = !this.showText;
this.$nextTick(function () {
    this.$refs.dummykeyboard.click();
})

Answer 6

仍然 focus 不适合你？？？

这是解决方案：

setTimeout(() => {
  this.$refs["input-0"].focus();
}, 1000);

诀窍是使用 setTimeout。

挂载时自动对焦输入（Vue）-iOS

父项

子组件

6 个答案: