Angular实现输⼊框中显⽰⽂章标签的实例代码
很多⽹站发帖的时候标签输⼊框看起来像是在<input> 元素中直接显⽰标签. ⽐如这种
⼀开始以为是把<span> 放在<input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现⽅式, 原来是⽤⼀个 <div> 把 <span>和 <input> 包起来, 然后让 <div> 模仿出输⼊框的样式. 再给 <div> 加上eventListensor, 点击 <div> 时, 使 <input> 获得焦点.
在 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 = ls.tag.value;
/
/ 检查键盘是否按下了逗号或者空格, ⽽且得要求
if (de === 'Comma' || de === 'Space') {
this.addTag(inputValue);
// 将新输⼊的标签加⼊标签列表后, 把输⼊框清空
ls.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 = ls.tag.value;
// 按下退格键, 且输⼊框是空的时候, 删除最后⼀个标签
if (de === 'Backspace' && !inputValue) {
return;
} else {
if (de === 'Comma' || de === 'Space') {
this.addTag(inputValue);
ls.tag.setValue('');
}
}
}
// 修改参数为可选参数, 当没有参数时, 删除列表中最后⼀个,
// 有参数时, 删除传⼊的标签
removeTag(tag?: string): void {
if (!!tag) {
// 这⾥使⽤了 lodash 的 pull
pull(this.tags, tag);
} else {
this.tags.splice(-1);
}
}
接下来就是调整样式了. 就略过了
不⾜之处
使⽤中⽂输⼊法输⼊完⼀个词按下空格时, 会直接把输⼊的内容加到列表⾥
使⽤中⽂输⼊法时, 按下退格键, 如果输⼊框⾥没有别的内容, 会直接删除列表中最后⼀个标签
总结
以上所述是⼩编给⼤家介绍的Angular 实现输⼊框中显⽰⽂章标签的实例代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
发布评论