如何在Vue.js的方法内触发输入焦点事件？

Question

我有一个正在使用以下事件的输入：

 <b-nput
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            @focus="$event.target.select()"
          ></b-input>

如何在里面使用这个 @focus="$event.target.select()" 事件：

上述方法复制值。我需要在用户点击复制时触发上面的 select 焦点事件怎样才能正确实现？

Answer 1

添加 saved 方法作为焦点事件处理程序：

@focus="saved"

方法：

methods: {
  saved(event){ //the event is passed automatically as parameter
     event.target.select()
  }
}

编辑：

尝试将ref添加到输入元素

 <b-input
          ref="input"
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
         
            @focus="$event.target.select()"
          ></b-input>

然后在方法内部以编程方式触发焦点：

 methods: {
      async copy(s) {
      await navigator.clipboard.writeText(s) 
      this.$refs.input.focus();
     ...
    }
}

Answer 2

您可以$event引用saved方法

  <b-nput
        class="input"
        id="link"
        v-model="link"
        placeholder="link"
        @focus="saved"
      ></b-input>


methods: {
  saved(event){
    console.log(event)
  }
}

ref - https://vuejs.org/v2/guide/events.html

Answer 3

输入 ref :

<b-input
            class="input"
            id="link"
            v-model="link"
            placeholder="link"
            ref="theInput"
          ></b-input>

然后在您的组件脚本中的任何位置：

this.$refs['theInput'].focus();

如何在Vue.js的方法内触发输入焦点事件？

How to trigger the input focus event inside a method in Vue.js?

javascript

vue.js

vue-component

vuejs2

bootstrap-vue