以逗号作为分隔符的角材料芯片输入不允许'<'（小于）答案

【问题标题】：Angular Material Chip Input with comma as separator wont allow '<' (less than)以逗号作为分隔符的角材料芯片输入不允许'<'（小于）
【发布时间】：2018-06-13 18:55:45
【问题描述】：

在material 带有输入的 Chips 示例中，他们使用 Enter 和 Comma 作为键来触发 Add 事件。但是，它似乎无法区分 COMMA 和 SHIFT+COMMA 之间的区别。这导致我无法在字段中输入“

【问题讨论】：

标签： angular angular-material

【解决方案1】：

该指令侦听 keydown 键代码。由于 shift 是一个单独的键，因此 shift-comma ('[matChipInputSeparatorKeyCodes]="separatorKeysCodes" 选项故意添加的 - 默认行为仅是输入键。

【讨论】：

我仍然希望逗号触发添加虽然
您必须通过输入字段中的事件来实现自己的逗号处理程序，并关闭逗号的自动处理程序。我不确定这是否可能。

【解决方案2】：

正如您已经发现的那样，问题在于逗号和< 符号共享相同的keyCode、188，这就是他们应该改用e.key 的原因。

这个问题好像已经修复了，好像你去@angular/components/src/material/chips/chip-input.ts and search for the _emitChipEnd function：

/** Checks to see if the (chipEnd) event needs to be emitted. */
_emitChipEnd(event?: KeyboardEvent) {
  if (!this._inputElement.value && !!event) {
    this._chipList._keydown(event);
  }
  if (!event || this._isSeparatorKey(event)) {
    this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });

    if (event) {
      event.preventDefault();
    }
  }
}

如果_isSeparatorKey 返回true，您将看到它只会发出chipEnd 事件。检查下面的实现，您会看到hasModifierKey(event) 必须返回false：

/** Checks whether a keycode is one of the configured separators. */
private _isSeparatorKey(event: KeyboardEvent) {
  return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
}

如果你在@angular/cdk/keycodes repo 中找到它，你可以看到它是added on the 7 Nov 2018：

/**
 * Checks whether a modifier key is pressed.
 * @param event Event to be checked.
 */
export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean {
  if (modifiers.length) {
    return modifiers.some(modifier => event[modifier]);
  } 

  return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
}

当您在 13 Jun 18 上提出这个问题时，您可能使用的库版本没有进行该检查，因此您只需更新到最新版本即可解决此问题。

但是，当前的实现仍然不正确，如果您想使用通过按 Shift + some key 输入的分隔符怎么办？它不会工作。

正确的解决方案是使用e.key 而不是检查修饰键并使用e.keyCode，尤其是考虑到e.which 和e.keyCode 已被弃用。

无论如何，如果你需要检查KeyboardEvent的属性值例如e.key、e.code、e.which或e.keyCode，你可以使用https://keyjs.dev：

免责声明：我是作者。

【讨论】：

@elie_ 我看到您询问有关在已删除的“答案”中将分隔符指定为字符而不是键码的问题。正如我在上面指出的，应该以不同的方式实现该功能以避免这些类型的错误，并可能使使用该组件更容易和更直观。无论如何，它就是这样，所以如果你想要这个功能，你需要在@angular/material repo 上打开一个问题并等待，或者自己提交一个带有修复程序的 PR。

【解决方案3】：

将此代码添加到您的输入 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"

使用此网站查找关键代码：keycode.info

【讨论】：

问题是“，”的键码是 188“COMMA”，而“