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


Posted in Javascript onNovember 07, 2018

很多网站发帖的时候标签输入框看起来像是在 <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);
 }
}

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

不足之处

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

总结

以上所述是小编给大家介绍的Angular 实现输入框中显示文章标签的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
VueCli3构建TS项目的方法步骤
Nov 07 #Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 #Javascript
vue+webpack中配置ESLint
Nov 07 #Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 #Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 #Javascript
详解react native页面间传递数据的几种方式
Nov 07 #Javascript
You might like
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php header功能的使用
2013/10/28 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
js实现html滑动图片拼图验证
2020/06/24 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
浅析Python中signal包的使用
2015/11/13 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
服装促销活动方案
2014/02/23 职场文书
校园安全主题班会
2015/08/12 职场文书