4

在 Vue 应用程序中，我在 a 上粘贴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/

4

2 回答 2

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/

于 2020-04-11T18:28:25.360 回答
1

目前（截至目前）根据 MDN 文档关于onpaste event

当用户尝试粘贴文本时会触发粘贴事件。

请注意，目前没有仅 DOM 的方式来获取正在粘贴的文本；您必须使用 nsIClipboard 来获取该信息。

而且由于剪贴板 API/事件处于草稿阶段，可能无法支持旧版浏览器。

一个不太整洁的解决方案是使用setTimeout：

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

更多信息可以在这里找到

于 2020-04-11T19:02:44.713 回答