Programing

VueJS - Ctrl+V를 감지하는 방법

c10106 2022. 4. 10. 22:27
반응형

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

반응형