javascript - Accessing paste event data with Vue - Stack Overflow

admin管理员组

文章数量:1400360

In a Vue app I have a paste listener on a textarea with the intention to run validation code when the user pastes data into this field. When I log the paste event I can see in the console that the data that was pasted into the field is there under event -> target -> value. I can't seem to access this with event.target.value though. What am I doing wrong?

Minimal example:

<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
    }
  }
})

/

In a Vue app I have a paste listener on a textarea with the intention to run validation code when the user pastes data into this field. When I log the paste event I can see in the console that the data that was pasted into the field is there under event -> target -> value. I can't seem to access this with event.target.value though. What am I doing wrong?

Minimal example:

<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/feg8pcmv/

• javascript
• vue.js
• vue-events

Share Improve this question Follow edited Apr 11, 2020 at 20:47 Aymen TAGHLISSIA 1,9351717 silver badges3131 bronze badges asked Apr 11, 2020 at 18:16 jonas87jonas87 67433 gold badges88 silver badges2525 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

First of all, your jsfiddle has a minor typo (this.paste instead of this.pasted).

Secondly, you need to use the "getData" method from the clipboardData property to access the text.

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

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

https://jsfiddle/zfuwy9ep/

That said, if you want to get the whole string inside the text area after something was pasted, you could wait until the current items in the event queue have been resolved, and read the value of the textarea afterwards

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

https://jsfiddle/cjq1bw5u/

Currently (as of now) according to MDN docs regarding onpaste event

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.

And since Clipboard API/events are in draft, supporting older browsers may not be achieved.

One not so neat solution is to use 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

本文标签： javascriptAccessing paste event data with VueStack Overflow