如何在Angular应用中实现Mac端Cmd+C复制快捷键的正常触发

核心问题出在你代码里的debounce防抖操作，以及使用了已废弃的keyCode、document.execCommand API，还有Mac平台下的按键事件特性适配问题。

1. 移除防抖逻辑 #

你添加的10ms防抖是导致问题的核心原因，有两个层面的影响：

• 按键检测层面：快速按下Cmd+C的两个事件间隔小于10ms，防抖逻辑只会保留最后一次触发的事件，虽然此时metaKey仍为true，但部分场景下Mac系统会优先响应系统级复制操作，直接吞掉后续冒泡到window的事件。
• 安全策略层面：剪贴板操作API（无论是旧的execCommand还是新的Clipboard API）都要求必须在用户交互的同步回调中调用，防抖的延时执行会让调用脱离同步上下文，直接被浏览器安全策略拦截。

如果要避免重复触发，建议换用throttle节流操作，或者直接移除防抖即可。

2. 修正按键判断逻辑 #

keyCode属性已被W3C废弃，不同系统、不同键盘布局的返回值可能不一致，直接用key属性判断即可，同时注意适配大小写情况：

if($event.metaKey && $event.key.toLowerCase() === 'c') {
  // 复制逻辑
}

3. 替换已废弃的复制API #

document.execCommand已经从Web标准中移除，多数现代浏览器的兼容性已经开始降级，改用标准的Clipboard API实现复制：

// 复制选中的文本
const selectedText = window.getSelection()?.toString() || '';
navigator.clipboard.writeText(selectedText).then(() => {
  console.log('复制成功');
}).catch(err => {
  console.error('复制失败', err);
});

修复后的完整代码 #

import { Observable } from 'rxjs';
import { fromEvent, merge } from 'rxjs';
import { map } from 'rxjs/operators';

export class BindKeypressEvent {

  onKeyPress($event: KeyboardEvent) {
    if($event.metaKey && $event.key.toLowerCase() === 'c' ) {
      // 可选：如果要覆盖系统默认复制行为，打开下面的注释
      // $event.preventDefault();
      const selectedText = window.getSelection()?.toString() || '';
      navigator.clipboard.writeText(selectedText).then(() => {
        alert('复制成功');
      });
    }
  }

  private bindKeypressEvent(): Observable<KeyboardEvent> {
    // 只需要监听keydown事件即可，keypress对功能键的支持有缺陷
    const eventsType$ = [
      fromEvent(window, 'keydown')
    ];
    return merge(...eventsType$)
      .pipe(
        map(state => (state as KeyboardEvent))
      );
  }

  public bind() {
    this.bindKeypressEvent().subscribe(($event: KeyboardEvent) => this.onKeyPress($event));
  }
}

额外注意事项 #

• 如果你的页面运行在非HTTPS环境下，navigator.clipboard API会无法使用，这种场景才需要降级用execCommand
• 确保你需要复制的内容已经被正确选中，没有被其他元素阻止文本选中

内容的提问来源于stack exchange，提问作者cilies38