2017-08-17 72 views
3

在Angular中,我可以編寫<input (keyup.enter)"onEnter($event)">來檢測用戶何時按Enter鍵。特定按鍵事件的事件綁定

同樣的,我可以與其他鍵escspaceshift

但如何做檢測時,用戶按下shift + up

是否有支持組合鍵的列表?(我could'n發現任何官方文檔)

回答

4

經過一番研究,我發現整潔的方式做到這一點:

<!-- Listen to Shift + Up --> 
<input (keyup.shift.arrowup)="..."> 

<!-- Listen to Ctrl + Shift + Down --> 
<input (keyup.control.shift.arrowdown)="..."> 

<!-- Listen to Esc within window --> 
<div (window:keyup.esc)="..."> 
2

您可以使用(keyup),並檢查該鍵被按下的event,併爲shiftKey

HTML

<input type="text" (keyup)="myFunc($event)"/> 

功能內部組件

private myFunc(event: KeyboardEvent): void { 
    if (event.key === 'ArrowUp' && event.shiftKey) { 
    // Your code 
    } 
} 
+0

如果這個作品我很喜歡。我會建議有一個keydown事件來檢查shift並將布爾值設置爲true。然後是一個鍵控功能,如果它是按鍵的移位,則將布爾值設置爲false,但如果它是箭頭鍵並且布爾值設置爲true,那麼這就是您的shift + up狀態。 – Kevin

+1

它不起作用。只有當我按下'up'時纔會調用該函數。當按'shift'+'up'時它不會調用,所以我不能檢查'event.shiftKey'是否爲true。 –

+1

@ taras-d你是對的,不幸的是,在使用'(keyup.arrowup)'時沒有觸發事件,同時按住'shift'。我更新了我的答案。 – Arg0n

2

是的,你可以這樣實現它:

<input (keyup)="onKeyUp($event)"> 

..並在您的打字稿代碼:

onKeyUp($event): void { 
    if ($event.shiftKey && $event.which === 38) { 
     // Place your logic here 
    } 
} 

這裏是工作PLUNKER DEMO的鏈接。

+0

這是可能的解決方案之一。但也許有辦法寫這樣的'(keyup.shift + up)=「...」'!? –

+0

你必須像我那樣在方法中加入'shift + up'邏輯。我在我的項目中使用了相同的功能。看到我的另一個答案爲Ctrl + S的通用Mac和Windows解決方案:https://stackoverflow.com/a/45569055/1791913 – Faisal

+1

我找到了我想要做的方式。我更新了我的問題。 –