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

【问题标题】：How to handle Paste(Ctrl+v or with mouse) event in vue.js?如何处理 vue.js 中的粘贴（Ctrl+v 或鼠标）事件？
【发布时间】：2017-11-16 02:37:34
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以简单地使用paste 事件：

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

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

【讨论】：

感谢您的回答。在 Vue 2.5.x 中，我必须将 onPaste 中的逻辑包装在 this.$nextTick 中。没有它，evt.target.value 没有正确更新。即，在第一次粘贴时，它是undefined。在第二次粘贴时，它等于我第一次粘贴的值。
要获取粘贴的值，请使用evt.clipboardData.getData('text/plain')

【解决方案2】：

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

使用上面来自@CodinCat 的示例，并对其进行更新。

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

您只需要像这样为您的财产设置观察者

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

和 HTML

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

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

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

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

【讨论】：