Demo

Question

我正在创建一个网站，其中会有很多输入字段。有点像扫描仪，我想在按下输入时禁用每个输入。

我现在有了这个：

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

但是我想传递输入本身，所以我可以禁用这些输入。（例如：doSomething(input) { input.attr.disabled = true; }

如何在doSomething函数中获取此输入字段？

注意：我不想使用像<input #input ...这样的东西，因为我有很多输入字段。这只会创造很多工作。

我想要的是每次在输入字段中按下输入时，它都会被禁用（仅使用一个函数）。

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>

动态按下输入时禁用输入

3 个答案:

Demo