单击按钮的行为与CTRL-V事件相同

2020-02-14 angular

我有一个函数可以识别出已按下CTRL-V并执行onPaste()函数。我打算这样做,但不使用ctrl-v,在这种情况下,请单击按钮。

我的问题是,如果您执行ctrl-v,则一切正常,但是如果您单击按钮并执行该功能,则它不起作用,我得到以下错误:无法读取未定义的属性'getData'。

我怎么解决这个问题?

谢谢

演示

@HostListener('paste', ['$event'])
  onPaste(e: ClipboardEvent) {
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData('text');
    alert(pastedData)
}

<button (click)="onPaste($event)">Do the Same as PASTE (ctrl-v)</button>

Answers

在CTRL-V上,您将获得ClipboardEvent类型的事件,该事件上带有剪贴板数据。当您的点击事件类型为MouseEvent时,上面没有剪贴板数据。

我创建了一个stackblitz演示来复制它,您可以自己尝试。

他们是不一样的事件:当您单击MouseEvent发出,当您使用CTRL + VA ClipboardEvent事件被发射。 MouseEvent没有clipbordData参数,因此出现错误。

在此处输入图片说明

要在单击时访问剪贴板,您将需要使用剪贴板API,该API会要求访问权限。

  onPaste(e: ClipboardEvent) {
    console.log(e);
    let clipboardData = e.clipboardData || (window as any).clipboardData;
    let pastedData = clipboardData.getData('text');
    alert(pastedData)
  }

  clickPaste() {
    navigator.clipboard.readText().then(clipboard => alert(clipboard));
  }

Stackblitz

Related