ユーザーがテキストボックスにスペースを発生させないようにする適切な方法は何ですかAngular2？

Question

は以前、私は次のようにjQueryを使用して問題に対処：

$("#textInput").keydown(function (e) { 
    return e.which !== 32; 
}); 

新しい角度と活字体でそれに近づくだろうか？

Answer 1

それとも単にを。

<input type="text" (keydown.space)="$event.preventDefault();"> 

---

---

私が今まであなたがそれを与えるキー番号を受け取り、それらに続い

@Directive({ 
    selector : '[prevent-keys]', 
    host : { 
     '(keydown)' : 'onKeyUp($event)' 
    } 
}) 
export class PreventKeyseDirective { 
    @Input('prevent-keys') preventKeys; 
    onKeyUp ($event) { 
     if (this.preventKeys && this.preventKeys.includes($event. keyCode)) { 
      $event.preventDefault(); 
     } 
    } 
} 

そして

<input [prevent-keys]="[32, 37 , 38 , 39 , 40 ]" type="text"> 

のようにそれを使用しないように便利なディレクティブを作成するために管理

これはスペース、上、左、下、右を防ぎますtキー：D

Answer 2

私はそうでなければangular2の様々な方法があるあなたが

$("#textInput").keydown(function (e) { 
    return e.which !== 32; 
}); 

を説明するように、あなたのコード内で$を使用することができますよりも、この

declare var $: any; 

のように私のクラスの上に$をdecalre keyupと​​のようにそれらも使用できます

Answer 3

あなたは

<input type="text" (keydown)="keyDownHandler($event)"/> 

次に、あなたのコントローラにkeyDownHandler()機能定義：このようなあなたのテンプレートに結合ULD使用イベント

keyDownHandler(event: Event) { 
    if (event.which === 32) 
     event.preventDefault(); 
}