手机版

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

时间:2021-08-28 来源:互联网 编辑:宝哥软件园 浏览:

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

起初,我认为这是在输入中加上跨度。我看了堆栈溢出和分段故障的实现。本来我是用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实现输入框中显示文章标签的示例代码。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:Angular实现了在输入框中显示文章标签的示例代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。