使用者輸入資料的時候，通常會綁定一些事情，做一些邏輯之類的，例如:使用者點選 Enter 則執行搜尋功能等等….

keyup 事件

keyup 顧名思義就是鍵盤按下之後放開會觸發的事情，其中傳入 $event 就是傳入 KeyboardEvent 的事件

keyup template
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
@Component({  
  template: `
    <input (keyup)="onKey($event)">    
  `
})
export class KeyUpComponent {
  
  onKey(event: KeyboardEvent) {
    let value = (<HTMLInputElement>event.target).value;
    ...
  }
}

使用 template reference variable

如果沒有一些特殊邏輯，傳入整個 keyboardEvent 並不是一個很棒的作法，而我們可以用 template reference variable 單純傳入 input 物件 或者 input 物件的 value。

template reference variable
  • ts
1
2
3
4
5
6
7
8
9
10
11
@Component({  
  template: `
    <input #box (keyup)="onKey(box.value)">    
  `
})
export class KeyUpComponent_v2 {
  
  onKey(value: string) {
    ...
  }
}

為了 enter 而生 => keyup.enter

當使用者點擊 enter 的時候，才觸發事件

keyup.enter
  • ts
1
2
3
4
5
6
7
8
@Component({  
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">    
  `
})
export class KeyUpComponent {  
  onEnter(value: string) { ...; }
}

順便的 blur 事件

當滑鼠點擊到其他地方的時候，或者是游標離開當下物件的時候才會觸發

keyup.enter
  • ts
1
2
3
4
5
6
7
8
@Component({  
  template: `
    <input #box (blur)="update(box.value)">    
  `
})
export class KeyUpComponent {  
  update(value: string) { ... }
}

參考

User Input