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 35 · Accepted Answer · edited Jul 15 '22 at 19:50

35

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 Jul 15 '22 at 19:50

tony19

125,647
18
229
307

answered Mar 10 '17 at 06:21

Saurabh

71,488
40
181
244

2

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

score 2 · Answer 3 · answered Aug 12 '22 at 19:34

I'm a little late to the party here but for anyone coming here with this same question, there is really no need for anything fancy that is not built into Vue itself. If you don't want to read through all of this

Here is a sandbox with a working example to play with

As the accepted answer says, vue has it's own event listeners as documented here

It also does not require key codes, specifically, to work. So in your case, it will accept the letter v

Below is an example of a vuetify component (although this will work with pretty much any element):

<v-text-field
   v-model="textField"
   @keydown.prevent.ctrl.v=""
   @keydown.prevent.meta.v=""
   @click.prevent.right.exact=""
/>

Here is the breakdown of the @stuff that you see there:

To prevent key combos like ctrl/cmd + v:
- In the case of combos, in order to make it work, you'll have to listen to keydown instead of the alternatives
- To account for Windows, you'll need to use @keydown.prevent.ctrl.v=""
- To account for Mac, you'll need to use @keydown.prevent.meta.v=""
- @keydown listens for the keydown event
- .prevent automatically applies event.preventDefault()
- .ctrl/.meta are the modifier keys you're listening for
  - the meta key is the CMD key on Mac and Windows key on Windows
- v is, of course, the other key we are listening for
- the empty "" just means we're not giving it a function to run. if you want to do anything additional, you can just simply reference a function here. like: @keydown.prevent.meta.v="doSomethingElse"
If you also want to prevent the right-click (context) menu: @click.prevent.right.exact=""
- @click will listen to the click event.
- .right is the modifier to listen for right-clicks only
- .exact makes sure that no other modifiers are accepted. Without this, someone could press shift + right-click and the context menu would appear as normal. In this case, .exact makes sure we're doing something on any version of right-click

VueJS - How to detect Ctrl+V?

3 Answers3