Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼

很多網(wǎng)站發(fā)帖的時(shí)候標(biāo)簽輸入框看起來(lái)像是在 <input> 元素中直接顯示標(biāo)簽. 比如這種

一開(kāi)始以為是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的實(shí)現(xiàn)方式, 原來(lái)是用一個(gè) <div> 把 <span> 和 <input> 包起來(lái), 然后讓 <div> 模仿出輸入框的樣式. 再給 <div> 加上eventListensor, 點(diǎn)擊 <div> 時(shí), 使 <input> 獲得焦點(diǎn).

StackBlitz 上的 Demo

在 Angular 中的實(shí)現(xiàn)

將各個(gè)tag用 <span> 顯示, 在同一行放一個(gè) <input> 用來(lái)輸入新的標(biāo)簽, 然后用一個(gè) <div> 將它們包起來(lái)

<div>
 <span *ngFor="let tag of tags">{{tag}}</span>
 <input type="text">
</div>

之后給 <div> 加上一個(gè)事件監(jiān)聽(tīng)器, 點(diǎn)擊 <div> 的時(shí)候, 激活 <input> . 為了能夠獲取 <input> 元素, 使用 Angular的 Template reference variables 來(lái)命名 <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 元素獲得焦點(diǎn)
  this.tagInputRef.nativeElement.focus();
 }
}

到此基本上整體思路就實(shí)現(xiàn)了. 接下來(lái)就是完善一下細(xì)節(jié). 比如

輸入完一個(gè)標(biāo)簽后, 按逗號(hào)或者空格自動(dòng)將輸入的標(biāo)簽添加到前面的標(biāo)簽列表中
給標(biāo)簽加上一個(gè)刪除按鈕

當(dāng)輸入框是空的時(shí)候, 按鍵盤(pán)的退格鍵可以刪除標(biāo)簽列表中最后一個(gè)標(biāo)簽
我們一步一步來(lái).

自動(dòng)將標(biāo)簽加入標(biāo)簽列表

給 <input> 元素添加一個(gè)事件監(jiān)聽(tīng), 可以監(jiān)聽(tīng)鍵盤(pán)按下了哪個(gè)鍵. 和鍵盤(pán)按鍵有關(guān)的事件有 keydown , keypress , keyup .

根據(jù) MDN 上的解釋, keydown 和 keypress 都是在按鍵按下之后觸發(fā), 不同點(diǎn)在于, 所有按鍵都可以觸發(fā) keydown , 而 keypress 只有按下能產(chǎn)生字符的鍵時(shí)才觸發(fā), shift , alt 這些按鍵不會(huì)觸發(fā) keypress . 而且 keypress 從 DOM L3 之后就棄用了.

keyup 就是松開(kāi)按鍵的時(shí)候觸發(fā).

首先給 <input> 標(biāo)簽添加事件監(jiān)聽(tīng) (這里用的 keyup , 后面會(huì)解釋為什么不用 keydown ).

<input #tagInput type="text" (keyup)="onKeyup($event)">

component 中對(duì)接收到的 KeyboardEvent 進(jìn)行處理

onKeyup(event: KeyboardEvent): void {
 // 這里將標(biāo)簽輸入框作為 FormGroup 中的一個(gè) control
 const inputValue: string = this.form.controls.tag.value;

 // 檢查鍵盤(pán)是否按下了逗號(hào)或者空格, 而且得要求
 if (event.code === 'Comma' || event.code === 'Space') {
  this.addTag(inputValue);
  // 將新輸入的標(biāo)簽加入標(biāo)簽列表后, 把輸入框清空
  this.form.controls.tag.setValue('');
 }
}

addTag(tag: string): void {
 // 去掉末尾的逗號(hào)或者空格
 if (tag[tag.length - 1] === ',' || tag[tag.length - 1] === ' ') {
  tag = tag.slice(0, -1);
 }
 // 有可能什么也沒(méi)輸入就直接按了逗號(hào)或者空格, 如果已經(jīng)在列表中, 也不添加
 // 這里使用了 lodah 的 find
 if (tag.length > 0 && !find(this.tags, tag)) {
  this.tags.push(tag);
 }
}

使用 keyup 而不是 keypress 的原因:

一開(kāi)始我是用的 keypress , 但是 keypress 觸發(fā)的時(shí)候, <input> 還沒(méi)接收到按鍵的值, 所以就會(huì)出現(xiàn)標(biāo)簽添加到列表, 并且清空輸入框后, 輸入框才接收到按下的逗號(hào), 于是剛剛清空的輸入框中就出現(xiàn)了一個(gè)逗號(hào).

keyup 是在釋放按鍵之后才觸發(fā), 此時(shí)輸入框已經(jīng)接收到按下的逗號(hào)的值, 再清空輸入框的時(shí)候就能把逗號(hào)一起清除掉

給標(biāo)簽加上一個(gè)刪除按鈕

就在每個(gè)標(biāo)簽旁邊添加一個(gè)叉號(hào) × , 點(diǎn)擊的時(shí)候, 把標(biāo)簽從列表中移除就行了

<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);
}

按下退格鍵刪除最后一個(gè)標(biāo)簽

不需要給DOM添加別的事件監(jiān)聽(tīng), 只需要對(duì)component中的方法稍加修改即可

onKeyUp(event: KeyboardEvent): void {
 const inputValue: string = this.form.controls.tag.value;
 // 按下退格鍵, 且輸入框是空的時(shí)候, 刪除最后一個(gè)標(biāo)簽
 if (event.code === 'Backspace' && !inputValue) {
  this.removeTag();
  return;
 } else {
  if (event.code === 'Comma' || event.code === 'Space') {
   this.addTag(inputValue);
   this.form.controls.tag.setValue('');
  }
 }
}

// 修改參數(shù)為可選參數(shù), 當(dāng)沒(méi)有參數(shù)時(shí), 刪除列表中最后一個(gè),
// 有參數(shù)時(shí), 刪除傳入的標(biāo)簽
removeTag(tag?: string): void {
 if (!!tag) {
  // 這里使用了 lodash 的 pull
  pull(this.tags, tag);
 } else {
  this.tags.splice(-1);
 }
}

接下來(lái)就是調(diào)整樣式了. 就略過(guò)了

不足之處

• 使用中文輸入法輸入完一個(gè)詞按下空格時(shí), 會(huì)直接把輸入的內(nèi)容加到列表里
• 使用中文輸入法時(shí), 按下退格鍵, 如果輸入框里沒(méi)有別的內(nèi)容, 會(huì)直接刪除列表中最后一個(gè)標(biāo)簽

總結(jié)

以上所述是小編給大家介紹的Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！