如何阻止按钮阻塞onPaste事件?

Question

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

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

是否有一种方法可以让粘贴动作通过按钮?

这实际上是一个angular应用，所以下面更接近我的实际代码:

<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>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文档中摘录的关于:

如果光标处于可编辑的上下文中，则粘贴操作将插入控件支持的最合适格式(如果有的话)的剪贴板数据给定上下文。

粘贴动作在不可编辑的上下文中不起作用，但是粘贴事件将触发。

另外，由于隐私限制，元素应该处于焦点位置:

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

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

——EDITS——

让你的按钮可被满足会产生一些问题。

• 用户可以聚焦该区域，它将有一个光标。这可以通过使用

  样式来修复。(contenteditable) {caret-color:透明;}

• 它还使用户能够更改其内容，这可能是不希望的。这可以通过添加一个keydown处理程序来修复:

  & lt;按钮类="__cancel"aria-label ="Close"mat-icon-button onClick ="onClickCancel()";onPaste ="onPaste(事件),contenteditable ="true"onKeydown ="preventKey(事件)"在

如:

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。据作者所知，这是angular中的一个bug。见https://github.com/angular/components/issues/23846