Angular 2+德语键盘Shift+星号组合键keydown事件处理问询

德语键盘的星号（*）是通过Shift+8组合触发的，这和英文键盘的键位逻辑不同——直接用keydown.shift.8可能达不到预期效果，因为按下这个组合时，浏览器捕获到的按键值其实是*而非8。下面给你两种可行的解决方案：

方案1：通过事件回调判断按键值 #

这种方法兼容性最好，适用于所有浏览器：

首先给你的元素加上tabindex="0"（确保元素可以获得焦点，否则键盘事件不会触发），然后绑定keydown.shift事件：

<span class="template-row" 
      tabindex="0"
      (click)="passPreviewForDisplay()" 
      (keydown.enter)="addTemplateToFroala()" 
      (keydown.control.shift.f)="handle($event)" 
      (keydown.arrowleft)="closeTree($event)" 
      (keydown.arrowright)="openTree($event)"
      (keydown.shift)="handleShiftAsterisk($event)"> 
  {{template.name}} 
</span>

然后在组件类里实现处理方法：

handleShiftAsterisk(event: KeyboardEvent) {
  // 当按下Shift+8时，德语键盘的key值为"*"
  if (event.key === '*') {
    // 这里写入你的业务逻辑
    console.log("Shift+星号组合键触发了！");
    // 如果需要阻止默认行为（比如避免输入*到文本框），可以加上这行
    event.preventDefault();
  }
}

方案2：直接绑定组合键（简化写法） #

部分现代浏览器支持直接通过按键字符绑定组合键，你可以尝试这种更简洁的写法：

<span class="template-row" 
      tabindex="0"
      (click)="passPreviewForDisplay()" 
      (keydown.enter)="addTemplateToFroala()" 
      (keydown.control.shift.f)="handle($event)" 
      (keydown.arrowleft)="closeTree($event)" 
      (keydown.arrowright)="openTree($event)"
      (keydown.shift.*)="handleAsterisk($event)"> 
  {{template.name}} 
</span>

对应的组件方法：

handleAsterisk(event: KeyboardEvent) {
  // 处理你的逻辑
  event.preventDefault();
}

注意事项 #

• 一定要给元素加上tabindex="0"，否则元素无法获得焦点，键盘事件不会被触发。
• 如果你的元素是动态生成的，确保tabindex正确设置，并且事件绑定正常生效。

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