使用 Vue 访问粘贴事件数据

Question

在 Vue 应用程序中，我在 textarea 上粘贴了 listener，目的是在用户将数据粘贴到此字段时运行验证代码。当我记录粘贴事件时，我可以在控制台中看到粘贴到字段中的数据位于 event -> target -> value 下。不过，我似乎无法使用 event.target.value 访问它。我做错了什么？

最小示例：

<div id="app">
  <textarea name="myField" @paste="onPaste"></textarea>
  <p>Field name: {{ fieldName }}</p>
  <p>Pasted data: {{ pasted }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    fieldName: '',
    pasted: ''
  },
  methods: {
    onPaste(event){
        console.log(event)
        this.message = event.target.name
        this.paste = event.target.value
    }
  }
})

https://jsfiddle.net/feg8pcmv/

Answer 1

首先，您的 jsfiddle 有一个小错字（this.paste 而不是 this.pasted）。

其次，您需要使用剪贴板数据属性中的"getData"方法来访问文本。

https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

this.pasted = event.clipboardData.getData('text')

https://jsfiddle.net/zfuwy9ep/

也就是说，如果你想在粘贴后得到文本区域内的整个字符串，你可以等到事件队列中的当前项目已经解决，然后再读取文本区域的值

setTimeout(() => {
   console.log('textarea contents', event.target.value);
})

https://jsfiddle.net/cjq1bw5u/

Answer 2

目前（截至目前）根据有关 onpaste event

的 MDN 文档

The paste event fires when the user attempts to paste text.

Note that there is currently no DOM-only way to obtain the text being pasted; you'll have to use an nsIClipboard to get that information.

并且由于 Clipboard API/events 处于草稿阶段，可能无法支持旧版浏览器。

一个不太巧妙的解决方案是使用 setTimeout:

  methods: {
    onPaste(event){
      setTimeout(() => {
      console.log(event);
      this.fieldName = event.target.name;
      this.pasted = event.target.value }, 100);
    }
  }

More info can be found here

使用 Vue 访问粘贴事件数据

Accessing paste event data with Vue

javascript

vue.js

vue-events