web-dev-qa-db-ja.com

Angular2の（キーアップ）のオプションは何ですか？

enterキーを離すと、次のように動作します。 keyup.enterに加えてkeyupで利用できる他のオプションは何ですか？

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
javascripthtmlonkeyupangular
60
AlikElzin-kilaka

テストで現在文書化されているオプションは、ctrl、shift、enter、およびescapeです。キーバインディングの有効な例を次に示します。

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

これを追跡できます here 公式ドキュメントは存在しませんが、すぐに公開されるはずです。

49
Angular University

このファイルはいくつかのヒントを提供します。たとえば、keydown.arrowupが必要な場合、keydown.upは機能しません。

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

13
Kasper

複数のキーイベント（具体的にはShift + Enter）にバインドする方法を探していましたが、良いリソースをオンラインで見つけることができませんでした。しかし、キーダウンバインディングを記録した後

<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のコマンドキー）のフラグもあります。

KeyEventsPlugin、JQuery、または純粋なJSバインディングは必要ありません。

10
protalk

このようなキーアップイベントを追加できます

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

コンポーネントでは、以下のようなコードを作成します

export class KeyUpComponent_v1 {
  values = '';

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

今日も同じ問題に直面しています。

これらは十分に文書化されておらず、未解決の問題が存在します。

スペースのようなkeyupの一部：

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

一部のkeydown
（キーアップでも機能する場合があります）：

<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/1887
https://github.com/angular/angular/issues/827
https://github.com/angular/angular/blob/master/packages/platform-b​​rowser/src/dom/events/key_events.ts
https://alligator.io/angular/binding-keyup-keydown-events/

2
Manohar Reddy Poreddy

キーアップイベントが外部の場合 CTRL、 SHIFT、 ENTER そして ESC ブラケット、@ Md Ayub ALi Sarkerのガイドを使用してください。ここでangular docs https://angular.io/docs/ts/latest/guide/user-input.html で言及されている唯一のキーアップ擬似イベントは ENTER キー。数字キーとアルファベット用のキーアップ擬似イベントはまだありません。

1
Benny64

Angular 7キーアップを使用できます。 https://angular.io/guide/user-input

0
user2148228