当按钮聚焦时如何禁用按键

Question

如何在焦点对准按钮时禁用向上箭头键，而在angular2中未对准按钮时如何启用向上箭头键？ 例如：

在html中：

<button type="button" (focus)="disableUpArrowKey()">

在脚本中：

disableUpArrowKey(){
    //??
}

Answer 1

绑定keydown并调用事件preventDefault。

html：

<button (keydown)="onKeydown($event)">Button</button>

ts：

...
onKeydown(event: KeyboardEvent) {
  if (event.key === 'ArrowUp') {
    event.preventDefault()
  }
}
...

stackblitz：https://stackblitz.com/edit/angular-xmzct5