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获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
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实现视频文件上传完整实例
2014/08/28 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue发送websocket请求和http post请求的实例代码
2019/07/11 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
微信小程序实现签字功能
2019/12/23 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
python 切片和range()用法说明
2013/03/24 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
项目副经理岗位职责
2013/12/30 职场文书
出纳员岗位职责
2014/03/13 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
求职信标题怎么写
2014/05/26 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL