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">
이 입력에 대해 이전 작업이 자동으로 비활성화됩니다.
사용방법onPaste
Vue 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
'programing' 카테고리의 다른 글
하루의 시작 시간과 종료 시간을 어떻게 구합니까? (0) | 2022.07.05 |
---|---|
C++용 가장 빠른 JSON 리더/라이터 (0) | 2022.07.05 |
Java 8: 스트림에 예외를 두는 방법을 사용하는 방법은 무엇입니까? (0) | 2022.07.05 |
C와 임베디드 C의 차이점은 무엇입니까? (0) | 2022.07.04 |
2개의 어레이 리스트를 같은 방법으로 랜덤화하는 방법 (0) | 2022.07.04 |