在 textarea 中实现标签答案

【问题标题】：To implement tags in textarea在 textarea 中实现标签
【发布时间】：2019-11-22 19:21:47
【问题描述】：

这是一个有点模糊的问题，所以我正在制作一个聊天应用程序，在输入 @ 时会弹出该组的用户，用户必须从这些人中进行选择。就像 WhatsApp 一样。

现在的问题是用户也可以退格并从名称中删除 1 个字符。与 WhatsApp 不同的是，@ 用于标记组中的某个人，甚至一个退格键也会导致整个文本被删除。

我在前端使用 Angular

我希望你能理解我想要传达的内容，任何正确方向的线索都将不胜感激。

【问题讨论】：

标签： html angular

【解决方案1】：

您需要绑定（keydown）输入元素和 FormControl 指令以通过 FormGroup 跟踪更改。

<input (keydown)="handleKeyDown($event)" [formControl]="formGroup.controls['input']" />

然后您可以实现在输入字段中查看退格及其上下文的功能。

...
formGroup = this._formBuilder.group({
  input: ''
});

handleKeyDown(event){
  if(event.keyCode == 46){
    console.log('Delete Key Pressed');
    if(event.target.selectionStart == event.target.selectionEnd && event.target.selectionStart == this.formGroup.get('input').value.length-1){
      //delete until @
      let lastIndex:number = this.formGroup.get('input').value.lastIndexOf('@');
      if(lastIndex != -1){
        this.formGroup.get('input').setValue(this.formGroup.get('input').value.substr(0, lastIndex));
      }
    }
  }
}

或者类似的东西...我没有测试代码。

【讨论】：