时间戳

首页 > 解决方案 > 如何在 Vue.js 中的方法内触发输入焦点事件？

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

问题描述

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

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

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

上述方法复制该值。我需要在用户点击复制的时候触发上面的选择焦点事件如何才能正确实现呢？

标签： javascriptvue.jsvuejs2vue-componentbootstrap-vue

解决方案

添加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();
     ...
    }
}

推荐阅读