Angular6 鍵盤按鍵事件


工作後一直在使用Angular,目前已經使用到Angular6,現在記錄一些常用的技術點以供後續使用。

在使用表單時,經常要用到表單搜索,按回車或鍵盤某一個鍵來觸發方法,angular提供了一個標籤。


寫法1:

(此方法優點是當需要多個鍵觸發方法時,可以用到,如果只是某一個鍵‘如回車’推薦使用第二種寫法)

<input nz-input [(ngModel)]="testKeyUp"  (keyup)="keyUpSearch($event)">

這樣寫需要傳入當前event對象,對象內容如下:

回車按鍵的KeyCode爲13,所以需要在單獨在方法中判斷,比較麻煩,但是如果對鍵位數量要求較多,則只能使用這個寫法。

寫法2:

<input nz-input [(ngModel)]="testKeyUp"  (keyup.enter)="keyUpSearch()">

在參數中直接指定鍵盤名稱,可以確保只有這個案件能觸發方法,減少方法的觸發次數,如果是單按鍵觸發,推薦使用此寫法。

如果需要確認不常用的一些鍵位的key,可以參照寫法1,傳入Event對象,在按鍵對象中的key查看當前按鍵的名稱。

Angular還支持(keydown) (keypress) 使用效果同理。

每一次的指正都促進我的成長,如果我有錯誤或您有疑問,請在下方留言。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章