Angular 2+优雅的拦截Command + S的方式 [英] Angular 2+ elegant way to intercept Command+S

问题描述

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

Trying to implement a shortcut key combination for Command+S to save a form.

我读过这个 - https://angular.io/guide/user-input ，但它没有提及有关元或命令的任何内容。

I've read this - https://angular.io/guide/user-input, but it does not say anything about meta or command.

尝试围绕表单：

<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 ...）。

With all the power and cross-browser capabilities of Angular 2+, I was hoping that this is somehow handled in an elegant way, using (keyup...).

肯定有很多Angular Devs使用Macs :)。

And for sure many Angular Devs use Macs :).

我还读过如何通过JavaScript捕获Mac的命令键？和 http://unixpapa.com/js/key.html 但仍然希望使用Angular优雅的解决方案，而不是使用特定于浏览器的东西...

I've also read How does one capture a Mac's command key via JavaScript? and http://unixpapa.com/js/key.html but still hoping for Angular elegant solution instead of fighting with browser-specific stuff...

推荐答案

更新

要停止打开浏览器的保存对话框，我们必须使用 keydown 事件而不是 keyup 并调用函数 $ event.preventDefault（）; 。更新后面的代码：

To stop the save dialog of the browser from opening, we must use the keydown event instead of keyup and call the function $event.preventDefault();. Updated code below:

  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();
    } 
  }

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

Then bind this method to the (keydown) event in your div:

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

更新 PLUNKER DEMO

原始答案

这是一个想法，如何检测你班级中的事件：

Here is an idea, how about detecting the event in you class:

  onKeyUp($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();
    } 
  }

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

Then bind this method to the (keyup) event in your div:

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

---

这是一个plunker链接： PLUNKER DEMO

这篇关于Angular 2+优雅的拦截Command + S的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！