如何阻止按钮阻止 onPaste 事件答案

【问题标题】：How do I stop buttons from blocking an onPaste event如何阻止按钮阻止 onPaste 事件
【发布时间】：2021-12-11 08:35:39
【问题描述】：

我有一个图像模式，用户可以在其中上传或粘贴图像。两者都工作得很好，除了目前我有捕捉焦点的模态按钮，所以粘贴只能通过手动单击按钮外部进行。如果此组件具有焦点，或者组件内的任何内容具有焦点，我希望任何粘贴都可以工作。

<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>

谢谢

【问题讨论】：

Paste 事件确实适用于所有元素，但有些需要将 contenteditable 设置为 true。不然帖子不是很清楚
@Vega 谢谢。那解决了它。如果您想将其发布为解决方案，我会接受。
@Vega，奇怪，这对我有用，但对周围的 div 没有内容可编辑。只有当按钮具有焦点时才会被阻止。

标签： javascript angular typescript dom-events onpaste

【解决方案1】：

Paste 事件被所有 HTML 元素拦截，但它只对可编辑上下文的元素产生影响，例如 <input>s 和 <textarea>s。
<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 doc 的关于这个：

如果光标在可编辑的上下文中，粘贴动作将插入以最适合的格式（如果有）支持的剪贴板数据给定上下文。

粘贴操作在不可编辑的上下文中无效，但无论如何都会触发粘贴事件。

此外，由于隐私限制，该元素应成为焦点：

为帮助防止滥用，此 API 必须不可用，除非脚本在具有焦点的文档的上下文中执行。

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

--- 编辑 ---

让你的按钮内容可编辑会产生一些问题。

用户可以聚焦该区域，它会有一个光标。这可以通过样式来修复

[内容可编辑] { 插入符号颜色：透明； }
它还使用户能够更改他们的内容，这可能是不受欢迎的。这可以通过添加 keydown 处理程序来解决：

如：

  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();
    }
  }

粘贴到 contenteditable 元素不适用于 safari - 除非我们设置样式

用户选择：自动；

如果您有一个角度项目（如在原始问题中），这会破坏 cdkTrapFocus。据作者所知，这是 Angular 中的一个错误。见https://github.com/angular/components/issues/23846

【讨论】：