如何阻止按钮阻塞onPaste事件

Question

我有一个图像模式，用户可以上传或粘贴图像。这两种方法都很好，但目前我在模式上有按钮捕捉焦点，所以粘贴只能通过手动单击按钮外部的方式工作。如果这个组件有焦点，或者组件中的任何东西都有焦点，我希望任何粘贴都能工作。

<div onPaste="onPaste()">
  <button class="__cancel" aria-label="Close" onClick="onClickCancel()">
  <button ... upload .../>
</div>

是否有办法允许粘贴操作通过按钮？

这实际上是一个角度应用程序，因此下面更接近我的实际代码：

<div (paste)="onPaste($event)" cdkTrapFocusAutoCapture cdkTrapFocus>
  <button class="__cancel" aria-label="Close" (onClick)="onClickCancel()">
  <button ... upload .../>
</div>

我尝试过将粘贴方法添加到按钮中，但它们不会触发。

<div (paste)="onPaste($event)" cdkTrapFocusAutoCapture cdkTrapFocus>
  <button class="__cancel" aria-label="Close" (onClick)="onClickCancel()" (paste)="onPaste($event)">
  <button ... upload   (paste)="onPaste($event)".../>
</div>

谢谢

Answer 1

Paste事件被所有HTML元素拦截，但它只对可编辑上下文的元素(如<input>和<textarea>)有影响。

<div>s或<p>s等元素只有在有内容时才能接受(paste)。通过打开contenteditable，这是可能的

<div onPaste="onPaste()" contenteditable="true">
  <button class="__cancel" aria-label="Close" (click)="onClickCancel()">
                                              //^-here also
  <button ... upload .../>
</div>

下面是关于这一点的API文档摘录：

如果光标位于可编辑上下文中，则粘贴操作将以给定上下文支持的最合适格式(如果有的话)插入剪贴板数据。 粘贴操作在不可编辑的上下文中不起作用，但粘贴事件会触发。

此外，由于隐私限制，这一要素应成为重点：

为了防止滥用，除非脚本在具有焦点的文档的上下文中执行，否则不能使用此API。

不同的浏览器可能有不同的行为，但记住这些限制可能有助于代码在任何地方工作。

编辑

使按钮可满足会产生一些问题。

• 用户可以对该区域进行聚焦，并将有一个光标。这可以通过使用 可满足的{插入色:透明；}
• 它还使用户能够更改他们的内容，这可能是不想要的。可以通过添加一个按键处理程序来修复这个问题：

例如：

  preventKey(event: KeyboardEvent) {
    // Buttons need contenteditable to receive (paste),
    // but we don't want our buttons to be editable, so this is blocked by this function.
    if (
      !(
        event.key === 'Tab' ||
        event.keyCode == 9 ||
        ((event.ctrlKey || event.metaKey) &&
          (event.key === 'v' || event.keyCode == 86))
      )
    ) {
      event.preventDefault();
    }
  }

• 粘贴到可内容元素上不适用于safari --除非我们使用 用户选择:自动；

如果您有一个角度的项目(如在最初的问题)，这打破了cdkTrapFocus。据作者所知，这是一个角度上的错误。请参阅https://github.com/angular/components/issues/23846