programing

Vue.js의 메서드 내에서 입력 포커스 이벤트를 트리거하려면 어떻게 해야 합니까?

goodjava 2022. 11. 2. 00:27

Vue.js의 메서드 내에서 입력 포커스 이벤트를 트리거하려면 어떻게 해야 합니까?

다음 이벤트를 사용하고 있는 입력이 있습니다.

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

이거 어떻게 쓰죠?@focus="$event.target.select()"이벤트 내부:

위의 방법은 값을 복사합니다.사용자가 copy를 클릭했을 때 위의 select focus 이벤트를 트리거해야 합니다.올바르게 달성하려면 어떻게 해야 합니까?

더하다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();
     ...
    }
}  

당신은 그것을 가질 수 있습니다.$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

A를 주다ref입력에 따라주세요.

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

컴포넌트 스크립트의 임의의 장소:

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

언급URL : https://stackoverflow.com/questions/63448100/how-to-trigger-the-input-focus-event-inside-a-method-in-vue-js