[Angular] User input 實用的 key 事件
使用者輸入資料的時候,通常會綁定一些事情,做一些邏輯之類的,例如:使用者點選 Enter 則執行搜尋功能等等….
keyup 事件
keyup 顧名思義就是鍵盤按下之後放開會觸發的事情,其中傳入 $event
就是傳入 KeyboardEvent
的事件1
2
3
4
5
6
7
8
9
10
11
12 ({
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。
- ts
1 | ({ |
為了 enter 而生 => keyup.enter
當使用者點擊 enter 的時候,才觸發事件
- ts
1 | ({ |
順便的 blur 事件
當滑鼠點擊到其他地方的時候,或者是游標離開當下物件的時候才會觸發
- ts
1 | ({ |