What are the options for (keyup) in Angular2?
JavascriptHtmlOnkeyupAngularJavascript Problem Overview
The following works great when the enter key is released. What other options are available for the keyup in addition to keyup.enter?
<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
Have hit the same problem today.
These are poorly documented, an open issue exist.
Some for keyup, like space:
<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">
Some for keydown
(may work for keyup too):
<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">
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/
Solution 4 - Javascript
This file give you some more hints, for example, keydown.up doesn't work you need keydown.arrowup:
Solution 5 - Javascript
you can add keyup event like this
template: `
<input (keyup)="onKey($event)">
<p>{{values}}</p>
`
in Component, code some like below
export class KeyUpComponent_v1 {
values = '';
onKey(event:any) { // without type info
this.values += event.target.value + ' | ';
}
}
Solution 6 - Javascript
The keyCode is deprecated you can use key property in the KeyboardEvent
<textarea (keydown)=onKeydownEvent($event)></textarea>
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' && event.shiftKey) {
//This is 'Shift+Enter'
}
}
Solution 7 - Javascript
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.
Solution 8 - Javascript
One like with events
(keydown)="$event.keyCode != 32 ? $event:$event.preventDefault()"