Доступ к данным события вставки с Vue - PullRequest
Новая
       21

Доступ к данным события вставки с Vue

1 голос
/ 11 апреля 2020

В приложении 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/

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

В настоящее время (на данный момент) в соответствии с документами 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);
    }
  }

Более подробную информацию можно найти здесь

0 голосов
/ 11 апреля 2020

Во-первых, у вашего jsfiddle есть небольшая опечатка (this.paste вместо this.pasted).

Во-вторых, вам нужно использовать метод getData из свойства clipboardData для доступа к тексту.

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/

...