Angular - 获取粘贴事件内容

Question

我有一个Angular组件，允许用户在中输入数据。该组件绑定了两个事件，即<code>keydown</code>和<code>paste</code>。这两个事件都会触发同一个方法，该方法将尝试确定输入的数据。</p> <p>我的问题在于，当进行粘贴操作时<code>paste</code>，我得到的是<code>formControl</code>的值，但它是粘贴之前的值，并且不包括我刚刚输入的内容。</p> <p><strong>HTML</strong></p><pre class="guess-HTML"><code><textarea formControlName="multiSearch" class="form-control" placeholder="Enter one or more values. One per line." rows="6" (keydown)="keyDownFunction($event)" (paste)="onPaste()"> </textarea> </code></pre><p><strong>组件</strong></p><pre class="guess-JavaScript"><code> /** * 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) } </code></pre><p><strong>问题</strong> 当<code>paste</code>事件被触发时，我如何立即获取粘贴到表单中的数据，而不是粘贴之前的值？</p> </br><div class="h-2"></div>如何在<code>paste</code>事件被触发后立即访问被粘贴进表单中的数据，而非粘贴之前的数值？</p>

- SBB

---

你尝试过在文本区域元素中使用[(ngModel)]作为属性吗？ngModel doc。 - Abel Valdez

Answer 1

通过处理 input 事件，您可以从 paste 事件获取已粘贴的内容和 textarea 的更新后的内容：

<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以查看演示。

- ConnorsFan

---

ClipboardEvent在Internet Explorer 11中不受支持。 - raffaeleambrosio

有什么线索可以解释为什么在添加(paste)="doSomething()"后无法在空输入框中粘贴？如果输入框中有任何字符，我就可以进行粘贴，但如果为空，则无法进行粘贴。 - fabio984

Answer 2

这是来自一个使用Angular2 TypeScript的示例，已经在我的项目中运行。希望它能帮助到别人。逻辑同样适用于其他情况。

1. angular-clipboard-event.html

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

2. 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);
    }
  }

- Sandeep K Nair

---

谢谢@Sandeep，有没有从用户界面处理的方法或代码来代替Ctrl + V粘贴呢？ - Alam