What are the options for keyup in Angular2

Question

The following works great when the enter key is released  What other options are available for the keyup in addition to keyup enter    lt input  inputstring  keyup enter   doSomething inputstring value    gt

User · Answer

I was searching for a way to bind to multiple key events - specifically, Shift+Enter - but couldn't find any good resources online. But after logging the keydown binding

<textarea (keydown)=onKeydownEvent($event)></textarea>

I discovered that the keyboard event provided all of the information I needed to detect Shift+Enter. Turns out that $event returns a fairly detailed KeyboardEvent.

onKeydownEvent(event: KeyboardEvent): void {
   if (event.keyCode === 13 && event.shiftKey) {
       // On 'Shift+Enter' do this...
   }
}

There also flags for the CtrlKey, AltKey, and MetaKey (i.e. Command key on Mac).

No need for the KeyEventsPlugin, JQuery, or a pure JS binding.

User · Answer

One like with events  keydown   quot  event keyCode    32    event  event preventDefault   quot

User · Answer

These are the options currently documented in the tests  ctrl  shift  enter and escape  These are some valid examples of key bindings   keydown control shift enter keydown control esc   You can track this here while no official docs exist  but they should be out soon

User · Answer

This file give you some more hints  for example  keydown up doesn t work you need keydown arrowup   https   github com angular angular blob 630d93150a58581a0d474ebf1befb5d09b6813c5 modules angular2 src platform browser browser adapter dart

User · Answer

The keyCode is deprecated you can use key property in the KeyboardEvent   lt textarea  keydown  onKeydownEvent  event  gt  lt  textarea gt    Typescript   onKeydownEvent  event  KeyboardEvent           you can use the following for checkig enter key pressed or not     if   event key      Enter           console log  event key      Enter             if   event key      Enter   amp  amp  event shiftKey                 This is  Shift Enter

User · Answer

you can add keyup event like this   template       lt input  keyup   onKey  event   gt     lt p gt   values   lt  p gt      in Component  code some like below  export class KeyUpComponent v1     values          onKey event any       without type info     this values    event target value

User · Answer

If your keyup event is outside the CTRL  SHIFT  ENTER and ESC bracket  just use  Md Ayub Ali Sarker s guide  The only keyup pseudo-event mentioned here in angular docs https   angular io docs ts latest guide user-input html is ENTER key  There are no keyup pseudo-events for number keys and alphabets yet

User · Answer

Have hit the same problem today   These are poorly documented  an open issue exist   Some for keyup  like space      lt input  keyup space   doSomething    gt   lt input  keyup spacebar   doSomething    gt      Some for keydown  may work for keyup too     lt input  keydown enter        gt   lt input  keydown a        gt   lt input  keydown esc        gt   lt input  keydown alt        gt   lt input  keydown shift esc        gt   lt input  keydown shift arrowdown        gt   lt input  keydown f4        gt    All above are from below links   https   github com angular angular issues 18870 https   github com angular angular issues 8273 https   github com angular angular blob master packages platform-browser src dom events key events ts https   alligator io angular binding-keyup-keydown-events

[javascript] What are the options for (keyup) in Angular2?

Examples related to javascript

Examples related to html

Examples related to onkeyup

Examples related to angular