Angular2の(キーアップ)のオプションは何ですか?


82

エンターキーを離すと、次のように機能します。に加えて、他にどのようなオプションがありますか?keyupkeyup.enter

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

たぶんこれはあなたにヒントを与えるかもしれませんgithub.com/angular/angular/issues/523、しかしそれはかなり古いです。
エリックマルティネス

回答:


57

これらは、現在テストで文書化されているオプションです:ctrl、shift、enter、escape。これらは、キーバインディングのいくつかの有効な例です。

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

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


5
うわー、この答えはAngularが20番目のアルファ版にあり、今日でも機能しているときに出されました。
JP ten Berge 2017



23

複数の主要なイベント(具体的には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バインディングは必要ありません。



13

今日も同じ問題にぶつかりました。

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

スペースのようなキーアップ用のもの:

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


11

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

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

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

export class KeyUpComponent_v1 {
  values = '';

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

1
これは数字では機能しません。入力フィールドに数値を入力しても、キーアップイベントは発生しません。そのために何ができるでしょうか?
モニカ2016

2

あなたからkeyupイベントが外にある場合CTRLSHIFTENTERおよびESCブラケット、ちょうど@MdアユブアリSarkerのガイドを使用。ここでAngularドキュメントhttps://angular.io/docs/ts/latest/guide/user-input.htmlに記載されている唯一のキーアップ疑似イベントがENTERキーです。数字キーとアルファベットのキーアップ疑似イベントはまだありません。


すみません、ロバート。リンクを使用してAngularドキュメントに移動するのに問題はありませんでした。できます。
Benny 6418年

はい、今は動作します。おそらく問題は私の側にありました。ごめんなさい。
ロバート2018年

1

でプロパティをkeyCode使用できるのは非推奨ですkeyKeyboardEvent

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.