当按钮聚焦时如何禁用按键 [英] How to disable a key when a button is focused

问题描述

如何在按钮聚焦时禁用向上箭头键，而在angular2中未聚焦时如何启用向上箭头键? 例如:

在html中:

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

在脚本中:

disableUpArrowKey(){
    //??
}

解决方案

绑定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

How to disable the up arrow key when a button is focused and enable it when the button is not focused in angular2? For example:

In html:

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

In script:

disableUpArrowKey(){
    //??
}

解决方案

Bind on keydown and call preventDefault of event.

html:

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

ts:

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

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

这篇关于当按钮聚焦时如何禁用按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！