使用者輸入資料的時候,通常會綁定一些事情,做一些邏輯之類的,例如:使用者點選 Enter 則執行搜尋功能等等….
keyup 事件
keyup 顧名思義就是鍵盤按下之後放開會觸發的事情,其中傳入 $event
就是傳入 KeyboardEvent
的事件
keyup template1 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 variable1 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.enter1 2 3 4 5 6 7 8
| @Component({ template: ` <input #box (keyup.enter)="onEnter(box.value)"> ` }) export class KeyUpComponent { onEnter(value: string) { ...; } }
|
順便的 blur 事件
當滑鼠點擊到其他地方的時候,或者是游標離開當下物件的時候才會觸發
keyup.enter1 2 3 4 5 6 7 8
| @Component({ template: ` <input #box (blur)="update(box.value)"> ` }) export class KeyUpComponent { update(value: string) { ... } }
|
參考
User Input