javascript - 使用 Vue 访问粘贴事件数据

Question

在 Vue 应用程序中，我有一个粘贴 listener在 textarea目的是在用户将数据粘贴到此字段时运行验证代码。当我记录粘贴事件时，我可以在控制台中看到粘贴到字段中的数据在 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 )。

其次，您需要使用 clipboardData 属性中的“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/