Các tùy chọn cho (keyup) trong Angular2 là gì?

Question 1

Cách sau hoạt động tuyệt vời khi phím enter được phát hành. Những tùy chọn khác có sẵn cho keyupthêm vào keyup.enter?

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

Question 2

Đây là các tùy chọn hiện được ghi lại trong các thử nghiệm: ctrl, shift, enter và Escape. Đây là một số ví dụ hợp lệ về các ràng buộc chính:

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

Bạn có thể theo dõi điều này ở đây trong khi không có tài liệu chính thức nào tồn tại, nhưng chúng sẽ sớm ra mắt.

Question 3

Tôi đang tìm cách liên kết với nhiều sự kiện chính - cụ thể là Shift + Enter - nhưng không thể tìm thấy bất kỳ tài nguyên tốt nào trực tuyến. Nhưng sau khi đăng nhập ràng buộc keydown

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

Tôi phát hiện ra rằng sự kiện bàn phím đã cung cấp tất cả thông tin tôi cần để phát hiện Shift + Enter. Hóa ra nó $eventtrả về một KeyboardEvent khá chi tiết .

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

Ngoài ra còn có các cờ cho CtrlKey, AltKey và MetaKey (tức là phím Command trên Mac).

Không cần KeyEventsPlugin, JQuery hoặc liên kết JS thuần túy.

Question 4

Tệp này cung cấp thêm cho bạn một số gợi ý, ví dụ: keydown.up không hoạt động, bạn cần keydown.arrowup:

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

Question 5

Đã gặp vấn đề tương tự ngày hôm nay.

Đây là những tài liệu kém, một vấn đề mở tồn tại.

Một số cho keyup , như khoảng trắng :

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

Một số cho keydown
(cũng có thể hoạt động cho keyup):

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

Tất cả ở trên là từ các liên kết dưới đây:

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/

Question 6

bạn có thể thêm sự kiện keyup như thế này

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

trong Thành phần, mã một số như dưới đây

export class KeyUpComponent_v1 {
  values = '';

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

Question 7

Nếu sự kiện KeyUp của bạn nằm ngoài CTRL, SHIFT, ENTERvà ESCkhung, chỉ cần sử dụng hướng dẫn @Md Ayub Ali Sarker của. Sự kiện giả keyup duy nhất được đề cập ở đây trong tài liệu góc https://angular.io/docs/ts/latest/guide/user-input.html là ENTERchìa khóa. Chưa có sự kiện giả keyup nào cho các phím số và bảng chữ cái.

Question 8

Không keyCodedùng nữa, bạn có thể sử dụng keythuộc tính trongKeyboardEvent

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

Chữ viết:

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

Question 9

Một lượt thích với các sự kiện

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