在textarea中实现标签

Question

这是一个模糊的问题，因此我正在制作一个聊天应用程序，其中在键入@时会弹出该组的用户，该用户必须从这些人中进行选择。

>

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

我在前端使用Angular

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

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

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