入力が動的に押されたときに入力を無効にする

Question

多くの入力フィールドがあるWebサイトを作っています。並べ替えのようなスキャナ、私は入力を押すと、各入力を無効にしたいと思います。

私は今、この持っている：

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

をしかし、私は、これらの入力を無効にすることができますので、入力自体に沿って通過したいです。何かのように（FE：？私は私のdoSomething機能では、この入力フィールドを取得できますかdoSomething(input) { input.attr.disabled = true; }

注：。私は非常に多くの入力フィールドを持っているので<input #input ...ようなものを使用したくないこれが唯一の意志多くの仕事を作成し、私が欲しい

すべてのインクルードが入るたびに（すべて1つだけの機能を使用して）それは無効になりますことを、入力フィールドに押されていることである

Answer 1

keyup.enterを入力にリッスンし、入力にdisabled属性を設定するディレクティブを作成します。これは、このようなディレクティブで行うことができます。

@Directive({ 
    selector: 'input[disable-on-enter]', 
}) 
export class DisableOnEnterDirective { 
    @HostBinding('attr.disabled') isDisabled; 
    @HostListener('keyup.enter') disableInput() { 
    this.isDisabled = true ; 
    } 
} 

そして、それはこのように使用することができます：

<input disable-on-enter placeholder="Press enter to disable" /> 

Demo

Answer 2

あなたがこれを行うことができます。。

<input (keyup.enter)="doSomething($event)"/> 

doSomething(event) { event.target.disabled = true; } 

Answer 3

はまた、あなたがこのような何かを試すことができ、

<input id="reply" name="reply" onKeyPress="enterpressalert(event)"/> 

<script> 
function enterpressalert(e){ 
var code = (e.keyCode ? e.keyCode : e.which); 
if(code == 13) { //Enter keycode 
e.target.disabled = true; 
} 
} 
</script>