Angular2의 (keyup) 옵션은 무엇입니까?

다음은 Enter 키를 놓을 때 잘 작동합니다 . 에 추가로 사용할 수있는 다른 옵션은 무엇입니까 ?keyupkeyup.enter

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

현재 테스트에서 문서화 된 옵션은 ctrl, shift, enter 및 escape입니다. 다음은 키 바인딩의 몇 가지 유효한 예입니다.

keydown.control.shift.enter
keydown.control.esc

공식 문서가없는 동안 여기에서 이를 추적 할 수 있지만 곧 출시 될 예정입니다.

여러 주요 이벤트 (특히 Shift + Enter)에 바인딩하는 방법을 찾고 있었지만 온라인에서 좋은 리소스를 찾을 수 없었습니다. 그러나 keydown 바인딩을 기록한 후

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

키보드 이벤트가 Shift + Enter를 감지하는 데 필요한 모든 정보를 제공한다는 것을 발견했습니다. $event상당히 상세한 KeyboardEvent 를 반환합니다 .

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

CtrlKey, AltKey 및 MetaKey에 대한 플래그 (예 : Mac의 경우 Command 키)도 있습니다.

KeyEventsPlugin, JQuery 또는 순수 JS 바인딩이 필요하지 않습니다.

이 파일은 더 많은 힌트를 제공합니다. 예를 들어 keydown.up이 작동하지 않는 경우 keydown.arrowup이 필요합니다.

https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart

오늘도 같은 문제에 부딪 혔습니다.

이는 제대로 문서화되어 있지 않으며 공개 된 문제가 있습니다.

공백과 같은 keyup 용 일부 :

<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">  

일부는 keydown
(keyup에도 작동 할 수 있음) :

<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">

위의 모든 내용은 아래 링크에서 가져온 것입니다.

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/

다음과 같이 keyup 이벤트를 추가 할 수 있습니다.

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

Component에서 아래와 같이 코드를 작성합니다.

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

당신의 keyup 이벤트가 벗어나면 CTRL, SHIFT, ENTER및 ESC브라켓, 단지 @Md Ayub 알리 Sarker의 가이드를 사용합니다. 여기 angular 문서 https://angular.io/docs/ts/latest/guide/user-input.html 에서 언급 된 유일한 keyup 의사 이벤트 가 ENTER핵심입니다. 숫자 키와 알파벳에 대한 키업 의사 이벤트는 아직 없습니다.

은 keyCode당신이 사용할 수있는 사용되지 않습니다 key에 속성을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' 
    }
}

이벤트와 같은 사람

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