Angular - On Paste Event Get Content

Question

I have an angular component that allows a user to enter data into a textarea. There are two events tied to this keydown and paste. Both of these events trigger the same method which will try and determine the data entered.

The issue I am having is when the data is pasted paste, I am getting the value of the formControl but its the value BEFORE the data is pasted and doesn't include what I actually just entered into the field.

HTML

<textarea 
  formControlName="multiSearch" 
  class="form-control" 
  placeholder="Enter one or more values. One per line." 
  rows="6" 
  (keydown)="keyDownFunction($event)"
  (paste)="onPaste()">
</textarea>

Component

  /**
   * If we hit enter in our text area, determine the data type
   */
  keyDownFunction(event) {

    // Enter Key?
    if (event.keyCode == 13) {
      this.determineDataType();
    }
  }

  /**
   * If we paste data in our text area, determine the data type
   */
  onPaste() {
    this.determineDataType();
  }

  /**
   * Using regex, determine the datatype of the data and confirm with the user.
   */
  determineDataType() {
    console.log(this.searchForm.value.multiSearch)
  }

Question How can I get access to the data that is pasted into the form as soon as the paste event is fired and not what the value was before pasting?

Did you try using `[(ngModel)]` as attribute in text area element? [ngModel doc](https://angular.io/api/forms/NgModel). — Abel Valdez, May 02 '18 at 16:05

ConnorsFan · Accepted Answer · 2018-05-02T16:41:08.150

76

You can get the pasted content from the paste event and the updated content of the textarea by handling the input event:

<textarea #myText (paste)="onPaste($event)" (input)="onInput(myText.value)"></textarea>

with this code:

onPaste(event: ClipboardEvent) {
  let clipboardData = event.clipboardData || window.clipboardData;
  let pastedText = clipboardData.getData('text');
  ...
}

onInput(content: string) {
  ...
}

See this stackblitz for a demo.

edited May 02 '18 at 16:41

answered May 02 '18 at 16:06

ConnorsFan

70,558
13
122
146

1

ClipboardEvent not supported in iexplorer 11 – raffaeleambrosio Jun 06 '19 at 08:18
Any clue why I can't PASTE on an empty input after add (paste)="doSomething()" ? I can paste if I have any char there, but if it's empty, paste doesn't work. – fabio984 Jul 19 '21 at 16:17

score 11 · Answer 2 · answered Feb 21 '19 at 18:32

This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.

angular-clipboard-event.html

<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />

angular-clipboard-event.ts

// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;

onPaste(event: any) {
    const items = (event.clipboardData || event.originalEvent.clipboardData).items;
    let blob = null;

    for (const item of items) {
      if (item.type.indexOf('image') === 0) {
        blob = item.getAsFile();
      }
    }

    // load image if there is a pasted image
    if (blob !== null) {
      const reader = new FileReader();
      reader.onload = (evt: any) => {
        console.log(evt.target.result); // data url!
        this.imgRenderer.nativeElement.src = evt.target.result;
      };
      reader.readAsDataURL(blob);
    }
  }

Thanks @Sandeep, instead of Ctrl + V for pasting, have any method or code to handle from UI? — Alam, Aug 07 '20 at 13:08

Angular - On Paste Event Get Content

2 Answers2

Linked