Angular实现输入框中显示文章标签的实例代码

很多网站发帖的时候标签输入框看起来像是在元素中直接显示标签. 比如这种

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为广丰企业提供专业的网站制作、做网站，广丰网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

Angular 实现输入框中显示文章标签的实例代码

一开始以为是把放在中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个

把和包起来, 然后让

模仿出输入框的样式. 再给

加上eventListensor, 点击

时, 使获得焦点.

StackBlitz 上的 Demo

在 Angular 中的实现

将各个tag用显示, 在同一行放一个用来输入新的标签, 然后用一个

将它们包起来


 {{tag}}

之后给

加上一个事件监听器, 点击

的时候, 激活 . 为了能够获取元素, 使用 Angular的 Template reference variables 来命名 .


 {{tag}}

在component中获得元素

export class EditorComponent {
 // 用 @ViewChild 获得 DOM 元素
 @ViewChild('tagInput') tagInputRef: ElementRef;

 focusTagInput(): void {
  // 让 input 元素获得焦点
  this.tagInputRef.nativeElement.focus();
 }
}

到此基本上整体思路就实现了. 接下来就是完善一下细节. 比如

输入完一个标签后, 按逗号或者空格自动将输入的标签添加到前面的标签列表中
给标签加上一个删除按钮

当输入框是空的时候, 按键盘的退格键可以删除标签列表中最后一个标签
我们一步一步来.

自动将标签加入标签列表

给元素添加一个事件监听, 可以监听键盘按下了哪个键. 和键盘按键有关的事件有 keydown , keypress , keyup .

根据 MDN 上的解释, keydown 和 keypress 都是在按键按下之后触发, 不同点在于, 所有按键都可以触发 keydown , 而 keypress 只有按下能产生字符的键时才触发, shift , alt 这些按键不会触发 keypress . 而且 keypress 从 DOM L3 之后就弃用了.

keyup 就是松开按键的时候触发.

首先给标签添加事件监听 (这里用的 keyup , 后面会解释为什么不用 keydown ).

component 中对接收到的 KeyboardEvent 进行处理

onKeyup(event: KeyboardEvent): void {
 // 这里将标签输入框作为 FormGroup 中的一个 control
 const inputValue: string = this.form.controls.tag.value;

 // 检查键盘是否按下了逗号或者空格, 而且得要求
 if (event.code === 'Comma' || event.code === 'Space') {
  this.addTag(inputValue);
  // 将新输入的标签加入标签列表后, 把输入框清空
  this.form.controls.tag.setValue('');
 }
}

addTag(tag: string): void {
 // 去掉末尾的逗号或者空格
 if (tag[tag.length - 1] === ',' || tag[tag.length - 1] === ' ') {
  tag = tag.slice(0, -1);
 }
 // 有可能什么也没输入就直接按了逗号或者空格, 如果已经在列表中, 也不添加
 // 这里使用了 lodah 的 find
 if (tag.length > 0 && !find(this.tags, tag)) {
  this.tags.push(tag);
 }
}

使用 keyup 而不是 keypress 的原因:

一开始我是用的 keypress , 但是 keypress 触发的时候, 还没接收到按键的值, 所以就会出现标签添加到列表, 并且清空输入框后, 输入框才接收到按下的逗号, 于是刚刚清空的输入框中就出现了一个逗号.

keyup 是在释放按键之后才触发, 此时输入框已经接收到按下的逗号的值, 再清空输入框的时候就能把逗号一起清除掉

给标签加上一个删除按钮

就在每个标签旁边添加一个叉号 × , 点击的时候, 把标签从列表中移除就行了


 
  {{tag}}
 ×
 
 

removeTag(tag: string): void {
 this.tags.splice(-1);
}

按下退格键删除最后一个标签

不需要给DOM添加别的事件监听, 只需要对component中的方法稍加修改即可

onKeyUp(event: KeyboardEvent): void {
 const inputValue: string = this.form.controls.tag.value;
 // 按下退格键, 且输入框是空的时候, 删除最后一个标签
 if (event.code === 'Backspace' && !inputValue) {
  this.removeTag();
  return;
 } else {
  if (event.code === 'Comma' || event.code === 'Space') {
   this.addTag(inputValue);
   this.form.controls.tag.setValue('');
  }
 }
}

// 修改参数为可选参数, 当没有参数时, 删除列表中最后一个,
// 有参数时, 删除传入的标签
removeTag(tag?: string): void {
 if (!!tag) {
  // 这里使用了 lodash 的 pull
  pull(this.tags, tag);
 } else {
  this.tags.splice(-1);
 }
}

接下来就是调整样式了. 就略过了

不足之处