CODEWITHSUNDEEP
angularevent-handlingkeyboard-eventsdom-events
bunny
bunny

Reputation: 2027

How to disable a key when a button is focused

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(){
    //??
}

Upvotes: 0

Views: 1403

Answers (1)

zmag
zmag

Reputation: 8241

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

Upvotes: 2

Related Questions