Angular 實現輸入框中顯示文章標籤

HybridSuns發表於2019-03-03
Angular
本文同時也釋出在了我的個人部落格中

很多網站發帖的時候標籤輸入框看起來像是在 <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();
  }
}複製程式碼

到此基本上整體思路就實現了. 接下來就是完善一下細節. 比如

  1. 輸入完一個標籤後, 按逗號或者空格自動將輸入的標籤新增到前面的標籤列表中
  2. 給標籤加上一個刪除按鈕
  3. 當輸入框是空的時候, 按鍵盤的退格鍵可以刪除標籤列表中最後一個標籤

我們一步一步來.

自動將標籤加入標籤列表

給 <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);
  }
}複製程式碼

接下來就是調整樣式了. 就略過了

不足之處

  • 使用中文輸入法輸入完一個詞按下空格時, 會直接把輸入的內容加到列表裡
  • 使用中文輸入法時, 按下退格鍵, 如果輸入框裡沒有別的內容, 會直接刪除列表中最後一個標籤


相關文章