Javascript 角度2+；拦截命令的优雅方式+；s

尝试为Command+S实现快捷键组合以保存表单

我读过-，但它没有说任何关于元或命令的内容

尝试使用以下内容围绕窗体：

<div
  (keyup.command.s)="save()"
  (keyup.command.u)="save()"
  (keyup.control.u)="save()"
  (keyup.control.s)="save()"
  (keyup.meta.u)="save()"
>

其中，只有

control.u

和

control.s

起作用

凭借Angular 2+的强大功能和跨浏览器功能，我希望它能以优雅的方式处理，使用

（keyup…

）

当然，许多有角度的开发者使用Mac:）

我也读过，但仍然希望有一个角度优雅的解决方案，而不是与浏览器特定的东西战斗

更新

要停止打开浏览器的保存对话框，我们必须使用

keydown

事件而不是

keydup

，并调用函数

$event.preventDefault（）。更新代码如下：

  onKeyDown($event): void {
    // Detect platform
    if(navigator.platform.match('Mac')){
        this.handleMacKeyEvents($event);
    }
    else {
        this.handleWindowsKeyEvents($event); 
    }
  }

  handleMacKeyEvents($event) {
    // MetaKey documentation
    // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
    let charCode = String.fromCharCode($event.which).toLowerCase();
    if ($event.metaKey && charCode === 's') {
        // Action on Cmd + S
        $event.preventDefault();
    } 
  }

  handleWindowsKeyEvents($event) {
    let charCode = String.fromCharCode($event.which).toLowerCase();
    if ($event.ctrlKey && charCode === 's') {
        // Action on Ctrl + S
        $event.preventDefault();
    } 
  }

然后将此方法绑定到div中的
（keydown）
事件：

<div (keydown)="onKeyDown($event)" tabindex="0">
</div>

<div (keyup)="onKeyUp($event)" tabindex="0">
</div>

然后将此方法绑定到div中的
（keyup）
事件：

<div (keydown)="onKeyDown($event)" tabindex="0">
</div>

<div (keyup)="onKeyUp($event)" tabindex="0">
</div>




下面是一个plunker链接：
全局侦听器，非弃用答案：

@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
        this.save();
        event.preventDefault();
    }
}

preventDefault（）和StopperPropagation（）等方法对我不起作用（使用当前的Chrome），因此我必须按多个键：ctrl+shift+s
在我的组件中定义事件处理程序时，它仅适用于此子网站，并且仅当某些表单输入处于焦点时才起作用，因此我必须在另一个位置添加侦听器
我压缩了多个函数，因为我不关心调用热键的环境，所以我想保存我的对象

ngOnInit（）{
document.body.addEventListener（“keydown”，事件=>{
让charCode=String.fromCharCode（event.which.toLowerCase（）；
开关（（navigator.platform.match（'Mac'）&&event.metaKey）| | event.ctrlKey）&&event.shiftKey&&charCode=='s'）{
大小写正确：{
this.saveArticle（）；//无论您的用例是什么
打破
}
}
});
}
有一个布尔值表示“meta”键，这是mac上的命令键，它是
事件。metaKey
@KarolDepka在mac上你有
metaKey
。请参阅更新的答案。这是一篇关于组合键的有用文章：默认情况下，div不可聚焦。我使用输入元素进行测试。我已经为此创建了一个plunk，下面是链接：[我正在试图找出如何阻止保存对话框打开]我在windows上