Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to handle Paste(Ctrl+v or with mouse) event in vue.js?

Tags:

I need to call a function when something is pasted on to a text area in my vue.js application. In this case in which event should I call my function?

like image 361
LJP Avatar asked Jun 14 '17 05:06

LJP


People also ask

What is the shorthand of V-on click in VUE JS?

Vue has a convenient shorthand for v-on : the @ symbol. For example, @click is functionally equivalent to v-on:click .

What is Paste event?

The paste event fires when the user initiates a paste action through the browser's user interface. The original target for this event is the Element that was the intended target of the paste action. You can listen for this event on the Document interface to handle it in the capture or bubbling phases.

What is V-on in VUE JS?

The v-on:click directive is a Vue. js directive used to add a click event listener to an element. First, we will create a div element with id as app and let's apply the v-on:click directive to a element. Further, we can execute a function when click even occurs. Syntax: v-on:click="function"


1 Answers

You can simply use the paste event:

<textarea @paste="onPaste"></textarea>  ...   methods: {     onPaste (evt) {       console.log('on paste', evt)     }   } ... 

It's not a vue-specific event. See https://developer.mozilla.org/en-US/docs/Web/Events/paste

like image 177
CodinCat Avatar answered Sep 28 '22 18:09

CodinCat