vue input 进入页面自动获取input 输入框 焦点

Question

<div class="top_center">
    <input type="text" class="form_input" @change="SearchCardname" v-model="CardName" autofocus="autofocus">
    <img src="./imgaes/sousuoh.png" alt="">
</div>

autofocus="autofocus 第一次进入页面的时候有获取焦点 但是输入框出不来。 。

怎么才能在每次进入这个页面。 获取焦点 的同时清空input的值

移动端

页面进去也没 自动焦点。。

Answer 1

写个自定义指令吧

Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        },
        //也可以用update,update就是当页面有操作的时候就触发，比如点击按钮，输入框输入都算。
        //有一个要注意的就是，就是你页面有几个input,比如一个input绑定了v-focus,一个没有绑定。你在没绑定v-focus的input输入时，绑定了v-focus的input就是自动获取焦点，这是个bug.
        //update: function (el) {
            //el.focus()
        //}
});
new Vue({
  ...
})

<input type="text"  class="form_input"  @change="SearchCardname"  v-model="CardName"  v-focus>

Answer 2

使用js控制吧

<input ref="input">

new Vue({
  ...
  mounted() {
    this.$refs['input'].focus()
    // this.$refs['input'].value = ''
  }
})

Answer 3

mounted的时候用this.$nextTick(() => {this.$refs['input'].focus()})

Answer 4

问题解决了么 遇到同样问题 求教

Answer 5

input加个autofocus不就好了

Answer 6

上面的方法都不管用