如何在vue.js中处理粘贴（Ctrl + v或鼠标）事件？

Question

我需要在将某些内容粘贴到vue.js应用程序中的文本区域时调用函数。在这种情况下，我应该在哪个事件中调用我的函数？

Answer 1

您只需使用paste事件：

即可

<textarea @paste="onPaste"></textarea>

...
  methods: {
    onPaste (evt) {
      console.log('on paste', evt)
    }
  }
...

这不是特定于vue的事件。见https://developer.mozilla.org/en-US/docs/Web/Events/paste

Answer 2

在Vue 2.6中使用onPaste方法，evt.target.value为空。要获取文本值，请使用：

  methods: {
    onPaste (evt) {
      console.log('on paste', evt.clipboardData.getData('text'))
    }
  }

Answer 3

此外，您还可以使用 .prevent 功能禁用输入的过去事件（CTRL + V）。

<input v-model="input" @paste.prevent class="input" type="text">

此输入的过去动作将自动被禁用

Answer 4

onPaste方法需要返回true才能实际粘贴文本。

使用@CodinCat上面的例子，并更新它。

<textarea @paste="onPaste"></textarea>

...
  methods: {
    onPaste (evt) {
      console.log('on paste', evt)
      return true;
    }
  }
...

Answer 5

它已经完成并包装到watch功能中，并且还可以处理“剪切”事件（使用鼠标）和键盘键。

您所需要做的就是像这样将观察者设置为您的媒体资源

data: {
    coupon_code: '',        
},
watch: {
    coupon_code: function(){
        console.log('watch-'+this.coupon_code);
    },
},

和HTML

<input type="text" autocomplete='off' v-model="coupon_code" >

documenation

Answer 6

我在这里看到了很多不同的答案，其中许多我会在同行代码审查期间标记。

用于补偿粘贴（包括键盘快捷键）的最短代码量是：

<textarea **@input**="doSomething" />.

您不应该使用 @keyup、keydown 等来处理文本输入。

见 - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

注意：KeyboardEvent 事件仅指示用户在低级别与键盘上的键进行了何种交互，不为该交互提供上下文意义。 当您需要处理文本输入时，请改用 input 事件。如果用户使用其他输入文本的方式（例如平板电脑或图形平板电脑上的手写系统），则可能不会触发键盘事件.