vue.js에서 붙여넣기(Ctrl+v 또는 마우스 사용) 이벤트를 처리하는 방법

vue.js에서 붙여넣기(Ctrl+v 또는 마우스 사용) 이벤트를 처리하는 방법

vue.js 어플리케이션의 텍스트 영역에 붙여넣을 때 함수를 호출해야 합니다.이 경우 어떤 경우에 제 기능을 호출해야 합니까?

를 간단하게 사용할 수 있습니다.paste이벤트:

<textarea @paste="onPaste"></textarea>

...
  methods: {
    onPaste (evt) {
      console.log('on paste', evt)
    }
  }
...

Vue 고유의 이벤트가 아닙니다.https://developer.mozilla.org/en-US/docs/Web/Events/paste 를 참조해 주세요.

또한 .prevent 함수를 사용하여 입력에 대해 과거 이벤트(CTRL+V)를 비활성화할 수 있습니다.

<input v-model="input" @paste.prevent class="input" type="text">

이 입력에 대해 이전 작업이 자동으로 비활성화됩니다.

사용방법onPasteVue 2.6의 메서드evt.target.value비어 있습니다.텍스트 값을 가져오려면 다음을 사용합니다.

  methods: {
    onPaste (evt) {
      console.log('on paste', evt.clipboardData.getData('text'))
    }
  }

실제로 붙여넣기하려면 onPaste 메서드가 true를 반환해야 합니다.

@CodinCat에서 위의 예를 사용하여 업데이트합니다.

<textarea @paste="onPaste"></textarea>

...
  methods: {
    onPaste (evt) {
      console.log('on paste', evt)
      return true;
    }
  }
...

그것은 이미 완성되었고 포장되어 있다.watch기능성 및 "컷" 이벤트(마우스 사용) 및 키보드 키도 처리합니다.

감시자를 이렇게 설정하면 됩니다.

data: {
    coupon_code: '',        
},
watch: {
    coupon_code: function(){
        console.log('watch-'+this.coupon_code);
    },
},

및 HTML

<input type="text" autocomplete='off' v-model="coupon_code" >

문서화

여기에는 다양한 답변이 많이 있습니다.그 중 상당수는 피어 코드 리뷰에서 플래그를 붙일 것입니다.

붙여넣기(키보드 단축키 포함)를 보정하는 가장 짧은 코드 양은 다음과 같습니다.

<textarea **@input**="doSomething" />.

사용해서는 안 됩니다.@keyup,keydown텍스트 입력을 처리하기 위한 , 등.

참조 - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

주의: KeyboardEvent 이벤트는 사용자가 키보드에 있는 키와 낮은 수준에서 어떤 상호작용을 했는지를 나타낼 뿐 그 상호작용에 대한 컨텍스트적 의미는 없습니다.텍스트 입력을 처리해야 할 경우 대신 입력 이벤트를 사용하십시오.사용자가 태블릿이나 그래픽 태블릿의 필기 시스템과 같은 대체 텍스트 입력 방법을 사용하는 경우 키보드 이벤트가 발생하지 않을 수 있습니다.

언급URL : https://stackoverflow.com/questions/44536362/how-to-handle-pastectrlv-or-with-mouse-event-in-vue-js