未加星标

Angular 实现输入框中显示文章标签

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

本文同时也发布在了我的个人博客中

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


Angular 实现输入框中显示文章标签
Angular 实现输入框中显示文章标签

一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <div> 时, 使 <input> 获得焦点.

StackBlitz 上的 Demo

在 Angular 中的实现

将各个tag用 <span> 显示, 在同一行放一个 <input> 用来输入新的标签, 然后用一个 <div> 将它们包起来

<div> <span *ngFor="let tag of tags">{{tag}}</span> <input type="text"> </div>复制代码

之后给 <div> 加上一个事件监听器, 点击 <div> 的时候, 激活 <input> . 为了能够获取 <input> 元素, 使用 Angular的 Template reference variables 来命名 <input> .

<div (click)="focusTagInput()"> <span *ngFor="let tag of tags">{{tag}}</span> <input #tagInput type="text"> </div>复制代码

在component中获得 <input> 元素

export class EditorComponent { // 用 @ViewChild 获得 DOM 元素 @ViewChild('tagInput') tagInputRef: ElementRef; focusTagInput(): void { // 让 input 元素获得焦点 this.tagInputRef.nativeElement.focus(); } }复制代码

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

输入完一个标签后, 按逗号或者空格自动将输入的标签添加到前面的标签列表中 给标签加上一个删除按钮 当输入框是空的时候, 按键盘的退格键可以删除标签列表中最后一个标签

我们一步一步来.

自动将标签加入标签列表

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

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

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

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

<input #tagInput type="text" (keyup)="onKeyup($event)">复制代码

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 触发的时候, <input> 还没接收到按键的值, 所以就会出现标签添加到列表, 并且清空输入框后, 输入框才接收到按下的逗号, 于是刚刚清空的输入框中就出现了一个逗号.

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

给标签加上一个删除按钮

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

<div (click)="focusTagInput()"> <span *ngFor="let tag of tags"> {{tag}} <span (click)="removeTag(tag)">×</span> </span> <input #tagInput type="text" (keyup)="onKeyup($event)"> </div>复制代码 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); } }复制代码

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

不足之处 使用中文输入法输入完一个词按下空格时, 会直接把输入的内容加到列表里 使用中文输入法时, 按下退格键, 如果输入框里没有别的内容, 会直接删除列表中最后一个标签

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Angular 实现输入框中显示文章标签
本站链接:https://www.codesec.net/view/610804.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(58)