特定按键事件的事件绑定答案

【问题标题】：Event binding for specific keypress event特定按键事件的事件绑定
【发布时间】：2017-08-17 14:13:05
【问题描述】：

在 Angular 中，我可以编写 <input (keyup.enter)"onEnter($event)"> 来检测用户何时按下 Enter 键。

我可以用其他键 esc、space、shift 等做同样的事情。

但是如何检测用户何时按下shift + up？

是否有支持组合键的列表？（我在官方文档中找不到）

【问题讨论】：

标签： angular

【解决方案1】：

经过一番研究，我找到了一种巧妙的方法：

<!-- 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)="...">

更新

在探索了角度源（here 和 here）之后。

事实证明，此类事件名称的一般语法是：eventname.modifier.key。
地点：
- 事件名称：keydown或keyup
- 修饰符：alt、control、meta或shift（可以多于一）
- key：来自KeyboardEvent.key属性的key

示例：keyup.control.z、keyup.control.backspace、keyup.shift.pageup、keyup.alt.dot。

请注意，某些组合可能不起作用，例如keyup.shift.tab.

【讨论】：

你能分享你找到这些的网址吗？我正在寻找更广泛的列表。

【解决方案2】：

您可以使用(keyup) 并检查按下了哪个键的event，以及shiftKey：

HTML

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

组件内部的功能

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

【讨论】：

如果这行得通，我喜欢它。我打算建议有一个 keydown 事件来检查 shift 并将布尔值设置为 true。然后一个键向上功能，如果它是键，则将该布尔值设置为 false，但如果它是箭头键并且布尔值设置为 true，那么这就是你的 shift + up 情况。
它不起作用。该函数仅在我按下up 时调用。按shift + up时不会调用，所以我无法检查event.shiftKey是否为真。
@taras-d 你是对的，不幸的是，在按住shift 的同时使用(keyup.arrowup) 时没有触发任何事件。我更新了我的答案。
@taras-d 然后把它写成答案。

【解决方案3】：

是的，你可以这样实现：

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

.. 并在您的打字稿代码中：

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

这是一个工作链接PLUNKER DEMO。

【讨论】：

这是可能的解决方案之一。但也许有办法写出这样的东西(keyup.shift+up)="..."！？
您必须像我一样将shift + up 逻辑放入方法中。我在我的项目中使用相同的。有关 Ctrl + S 的通用 Mac 和 Windows 解决方案，请参阅我的另一个答案：stackoverflow.com/a/45569055/1791913
我找到了我想做的方式。我更新了我的问题。
@taras-d 有趣、简洁的解决方案 :)
然而，该解决方案将仅限于 windows ！