使用者輸入資料的時候,通常會綁定一些事情,做一些邏輯之類的,例如:使用者點選 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