VueJS - How to detect Ctrl+V?

Question

I've already seen the answers to this question, but it's not the solution I need, since it's for jQuery, and I need something for vue.js.

So far, I was able to detect single character presses using the ff. code:

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()" />

The code above successfully prevents the textbox from accepting ArrowLeft, Home, and Control key presses.

The problem:

I'm trying to figure out how to detect Ctrl+V, because I want to prevent paste action in my text box. Does anyone know how to do this? Thanks in advance.

The same approach can be used as in the answer you referenced. Just use `document.addEventListener` instead of jQuery methods. — Rustem Kakimov, Mar 10 '17 at 06:19
http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript Here's the answare usying keyup and keydown events — JustARandomProgrammer, Mar 10 '17 at 06:22
@Amresh I am aware that it is throwing an error in the snippet "tool" here, but it doesn't have any error in my dev environment right now. — ITWitch, Mar 10 '17 at 06:23

score 31 · Accepted Answer · edited Sep 16 '17 at 16:49

31

To detect two keys, Vue provides modifier keys, For example to detect Alt+C, you can simply do:

<input @keyup.alt.67="YourFn">

Similarly for Ctrl+V, you can do:

<input @keyup.ctrl.76="YourFn">

As I can see here, ASCII code for Ctrl+v is 22, so you should be simply able to do :

<input @keyup.22="YourFn">

edited Sep 16 '17 at 16:49

Fabrizio

7,190
6
37
86

answered Mar 10 '17 at 06:21

Saurabh

66,712
36
176
232

1

As much as I like this answer there is a [note](https://vuejs.org/v2/guide/events.html#Modifier-Keys) that says: ...keyup.ctrl will only trigger if you release a key while holding down ctrl. It won’t trigger if you release the ctrl key alone. – Amresh Venugopal Mar 10 '17 at 06:30
1

This works like magic! I can even use it alongside my existing `@keyup`/`@keydown` functions. `@keydown.22` doesn't do anything, so I used `@keydown.ctrl.86` instead. Thanks a lot for your help! – ITWitch Mar 10 '17 at 06:39

score 2 · Answer 2 · answered Jan 25 '21 at 15:19

2

you can check the js fiddle link for the same

keyup: function(event){
    if(event.keyCode == 86 && event.ctrlKey){
    // do something here
  }
}

https://jsfiddle.net/neelkansara28/wh61rby8/16/

answered Jan 25 '21 at 15:19

Neel Kansara

21
3

VueJS - How to detect Ctrl+V?

2 Answers2