javascript - What are the options for (keyup) in Angular2? - Stack Overflow

admin管理员组

文章数量:1134579

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)"/>

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
• html
• onkeyup
• angular

Share Improve this question Follow asked Aug 22, 2015 at 12:03 AlikElzin-kilakaAlikElzin-kilaka 35.9k3939 gold badges201201 silver badges291291 bronze badges 1

• Maybe this could give you a hint github.com/angular/angular/issues/523, it's quite old though. – Eric Martinez Commented Aug 22, 2015 at 14:49

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 62

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.

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.

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/

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

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 + ' | ';
  }
}

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 checking enter key pressed or not
    if ($event.key === 'Enter') {
      console.log($event.key); // Enter
    }


    if ($event.key === 'Enter' && event.shiftKey) {
           //This is 'Shift+Enter' 
    }
}

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.

One like with events

(keydown)="$event.keyCode != 32 ? $event:$event.preventDefault()"

In the app.component.html file Note: Have the form field above table tag

<mat-form-field>
            <input matInput (keyup)="applyFilter($any($event.target).value)" placeholder="Filter">
    </mat-form-field>

In the app.component.ts file

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

本文标签： javascriptWhat are the options for (keyup) in Angular2Stack Overflow