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

当许多网站发布时，标签输入框看起来像是直接在输入元素中显示标签。比如这个

起初，我认为这是在输入中加上跨度。我看了堆栈溢出和分段故障的实现。本来我是用div包装span和input，然后让div模仿输入框的样式。然后我给div添加了eventListensor，当我点击div的时候，我让输入获得了焦点。

StackBlitz演示

角度实现

用span显示每个标签，在同一行输入新标签，然后用div包装它们

在div span * ng之后为div添加一个事件侦听器，用于='让标记的标记' {tag}}/span输入类型=' text'/div，并在单击div时激活输入。为了获得输入元素，使用角度模板引用变量来命名输入。

div(click)=' focustaginput()' span * ng for='让标记的标记' { tag } }/span input # tag input type=' text '/div获取组件中的输入元素

导出类EditorComponent {//获取带有@ViewChild的DOM元素@ viewchild('标记输入')taginputref3360 elementrefFocusTagInput(): void {//让输入元素获得这个的焦点。taginputref . native element . focus()；}}至此，整个思路基本实现。下一步是完善细节。例如，

输入标签后，按逗号或空格将输入的标签自动添加到上一标签列表中，并向标签添加删除按钮

当输入框为空时，按键盘的退格键删除标签列表中的最后一个标签。

自动将标签添加到标签列表中

向输入元素添加事件监视器，以监视键盘按下了哪个键。与键盘按键相关的事件有向下键、按键、向上键。

根据MDN上的解释，按键和按键是在按键被按下后触发的。不同的是，所有按键都可以触发下键，而按键只能在按下可以生成字符的按键时触发，shift和alt键不会触发按键。除此之外，自从DOM L3之后，keypress就被放弃了。

释放按键时，按键被触发。

首先，将事件监控添加到输入标签中(这里使用了keyup，为什么后来没有使用keyup)。

输入# tag输入类型=' text' (keyup)=' onkeyup ($ event)'组件来处理接收到的KeyboardEvent

Onkeyup(事件：键盘事件): void {//这里，标签输入框作为FormGroup :字符串=this中的控件常量输入值。form . controls . tag . value；//检查键盘是否按下了逗号或空格，以及if (event。代码=='逗号' | |事件。代码==' space') {this。添加标签(输入值)；//将新输入的标签添加到标签列表后，清空该标签。输入框中的form . controls . tag . setvalue(')；}}添加标记(标记：字符串): void {//删除逗号或空格if在结尾(标记[标记。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)；}}使用键盘快捷键而不是按键：的原因

一开始我用的是按键，但是当按键被触发时，输入还没有收到按键的值，所以标签被添加到列表中，输入框清空后，输入框只收到被按下的逗号，所以刚清空的输入框中出现了一个逗号。

释放按钮后，按键被触发。此时，输入框已经接收到按下的逗号的值，当输入框再次清空时，逗号可以一起清除

向标签添加删除按钮

只需在每个标签旁边添加一个叉号。单击时，只需从列表中移除标签

div(click)=' focusTagInput()' span * ngFor=' let tag of tags ' { tag } } span(click)=' remove tag(tag)'/span/span input # tagInput type=' text '(keyup)=' onKeyup($ event)'/div remove tag(tag : string): void { this . tags . splice(-1)；}按退格键删除最后一个标签

不需要在DOM中添加其他事件监控，只需稍微修改组件中的方法即可

onKeyUp(event : KeyboardEvent): void { const inputvalue e : string=this . form . controls . tag . value；//当按下退格键且输入框为空时，删除最后一个标记if (event.code==='Backspace '！inputValue){ this . remove tag()；返回；} else { if (event.code=='逗号' || event.code=='空格'){ this . addtag(InputValue)；this . form . controls . tag . setvalue(')；} } }//修改后的参数是可选的。如果没有参数，删除列表中的最后一个。//如果有参数，删除传入标记removeTag(标记？字符串): void { if(！Tag) {//这里使用了lodash的pull pull(this.tags，tag)；} else { this . tags . splice(-1)；}}下一步是调整风格。我会跳过它

缺点

当使用中文输入法输入一个单词并按下空格时，输入的内容将直接添加到列表中。使用中文输入法时，按退格键，如果输入框中没有其他内容，列表中最后一个标签摘要将被直接删除

以上是边肖介绍的在Angular实现输入框中显示文章标签的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！