반응형
VueJS - Ctrl+V를 감지하는 방법
나는 이미 이 질문에 대한 답을 봤지만, 그것은 내가 필요로 하는 해결책이 아니다. 왜냐하면 그것은 jQuery를 위한 것이고, 나는 vue.js를 위한 무언가가 필요하기 때문이다.
지금까지 ff. 코드를 사용하여 단일 문자 누름을 감지할 수 있었다.
export default {
name: 'game',
data () {
return {
allowInput: false,
disabledKeys: ['ArrowLeft', 'Home', 'Control']
}
},
methods: {
keymonitor: function (event) {
console.log(event.key)
if (this.disabledKeys.indexOf(event.key) >= 0) {
event.preventDefault()
this.allowInput = false
// alert('not allowed')
} else {
this.allowInput = true
}
},
checkAnswer () {
if (! this.allowInput) {
alert('the key(s) you pressed is/are not allowed')
}
} /* END checkAnswer */
} /* END methods */
} /* END export default */
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<input id="typeBox" ref="typeBox" autocomplete="off" placeholder="Type here..."
@keydown="keymonitor" @keyup="checkAnswer()" />
위의 코드는 텍스트 상자가 , , 및 키 누름을 수신하지 못하도록 하는 데 성공한다.
문제:
텍스트 상자에 붙여넣기 동작을 방지하고 싶기 때문에 V+를 탐지하는 방법을 알아내려고 한다.이거 할 줄 아는 사람 있어?미리 고맙다.
Vue는 두 개의 키를 탐지하기 위해 한정자 키를 제공하는데, 예를 들어 C+를 탐지하기 위해 다음과 같은 작업을 간단히 수행할 수 있다.
<input @keyup.alt.67="YourFn">
마찬가지로 +V에서도 다음을 수행할 수 있다.
<input @keyup.ctrl.76="YourFn">
여기서 볼 수 있듯이 v+의 ASCII 코드는 22이므로, 간단히 다음을 수행할 수 있어야 한다.
<input @keyup.22="YourFn">
js fiddle link를 동일하게 확인할 수 있다.
keyup: function(event){
if(event.keyCode == 86 && event.ctrlKey){
// do something here
}
}
https://jsfiddle.net/neelkansara28/wh61rby8/16/
참조URL: https://stackoverflow.com/questions/42711537/vuejs-how-to-detect-ctrlv
반응형
'Programing' 카테고리의 다른 글
Vuejs : v-for에 여러 개의 확인란이 있는 v-model (0) | 2022.04.10 |
---|---|
vue v-for 루프, 클래스 개인 추가 (0) | 2022.04.10 |
Vue 2; 'firebase/app'에서 내보내기 'default'('firebase'로 가져오기)를 찾을 수 없음 (0) | 2022.04.10 |
react.js: 구성 요소 제거 (0) | 2022.04.09 |
한 줄로 여러 칸을 간단하게 제거할 수 있는 방법이 있는가? (0) | 2022.04.09 |