Angular - On Paste事件获取内容

Question

我有一个角度组件,允许用户输入数据textarea.有绑在这两个事件keydown和paste.这两个事件都会触发相同的方法,该方法将尝试确定输入的数据.

我遇到的问题是,当数据被粘贴时paste,我得到的是值,formControl但是它的值是在粘贴数据之前,并且不包括我实际输入到字段中的内容.

HTML

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

零件

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

问题 如何在paste事件触发后立即访问粘贴到表单中的数据,而不是粘贴前的值？

Answer 1

您可以通过处理事件来获取paste事件中的粘贴内容和更新的内容:textareainput

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

使用此代码:

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

onInput(content: string) {
  ...
}

有关演示,请参阅此stackblitz.

Answer 2

这是来自一个适用于我的项目的 angular2 打字稿示例。希望它可以帮助某人。其他情况的逻辑也是一样的。

1. 角度剪贴板-event.html

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

2. 角度剪贴板-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);
    }
  }