Question

我需要能够在mat-chip中编辑内容。

HTML中的过程非常简单：

<mat-chip contenteditable="true">Editable content</mat-chip>

StackBlitz demo

您可以正确编辑内容，但无法使用[DELETE]或[BACKSPACE]删除内容。但是你可以剪切内容（使用剪贴板）。我认为这是由于mat-chips如何处理键盘事件。在Angular Material Doc中，它表示“删除”＆＃39;方法：

允许以编程方式移除芯片。由MatChipList调用时按下DELETE或BACKSPACE键。＆＃34;

那么有没有办法从mat-chip中取消绑定这些事件，以便我可以使用这些键编辑内容？我并不打算通过键盘删除芯片。

我尝试使用[removable] =＆＃34; false＆＃34;但它没有做任何事情（见stackblitz）

我想也许我可以禁用所有键盘交互，但在keyboard interaction部分中似乎没有任何方法可以这样做。

Answer 1

您可以通过在mat-chip-content中添加按键处理程序来拦截冒泡按键事件。

您的模板：

<mat-chip>
   <div class="input-wrapper" (keypress)="onMatChipKeyPress($event)">
      <input placeholder="Here you type in some content and press backspace or other keys">
   </div>
</mat-chip>

您的Javascript /打字稿：

onMatChipKeyPress(event) {
   event.stopImmediatePropagation();
}

从mat-chip取消绑定键盘事件？

1 个答案: