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

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

다음은 입력 키를 놓으면 잘 작동합니다.에 추가로 사용할 수 있는 옵션은 무엇입니까?

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

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

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

공식 문서가 존재하지 않는 동안 여기서 이 정보를 추적할 수 있지만 곧 공개될 것입니다.

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

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

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

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

또한 CtrlKey, AltKey 및 MetaKey(Mac의 명령 키)에 대한 플래그도 있습니다.

키 이벤트 플러그인, JQuery 또는 순수 JS 바인딩이 필요하지 않습니다.

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

문서화가 미흡하고 미해결 문제가 존재합니다.

일부는 공간과 같은 키업을 위한 것입니다.

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

일부는 키다운용입니다.
(키업에서도 작동할 수 있음):

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

이 파일은 keydown.up이 작동하지 않습니다. keydown.arrowup:

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

당신은 다음과 같은 키업 이벤트를 추가할 수 있습니다.

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

구성요소에서 아래와 같은 코드를 지정합니다.

export class KeyUpComponent_v1 {
  values = '';

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

그keyCode더 이상 사용할 수 없습니다.key의 재산.KeyboardEvent

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

유형 스크립트:

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

키업 이벤트가 , 및 브래킷 외부에 있는 경우 @Md 아유브 알리 사커의 가이드를 사용하십시오.여기 각진 문서 https://angular.io/docs/ts/latest/guide/user-input.html 에서 언급된 유일한 키업 유사 이벤트는 키입니다.숫자 키 및 알파벳에 대한 키업 유사 이벤트가 아직 없습니다.

사건과 같은 것.

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

app.component.html 파일에서 참고: 테이블 태그 위에 양식 필드 있음

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

app.component.ts 파일

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

언급URL : https://stackoverflow.com/questions/32155887/what-are-the-options-for-keyup-in-angular2