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 学习 几种常用方法
Jun 11 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
JavaScript实现简单计算器功能
Dec 19 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
升职自荐信范文
2015/03/27 职场文书
七一活动主持词
2015/06/29 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书