angular度2改变每个按键的事件

只有在input焦点发生变化后才会调用change事件。 我怎样才能让事件触发每个按键？

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" /> {{mymodel}} 

第二个绑定改变每个按键btw。

Answer 1

使用ngModelChange将[(x)]语法拆分为两部分，即属性数据绑定和事件绑定：

 <input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" /> {{mymodel}} 

 valuechange(newValue) { mymodel = newValue; console.log(newValue) } 

它也适用于退格键。

Answer 2

我只是使用事件input，它的工作原理如下：

在.html文件中：

 <input type="text" class="form-control" (input)="onSearchChange($event.target.value)"> 

在.ts文件中：

 onSearchChange(searchValue : string ) { console.log(searchValue);} 

Answer 3

 <input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/> {{mymodel}} 

Answer 4

保持angular度ngModel同步的秘密事件是事件调用input 。 因此，您的问题的最佳答案应该是：

 <input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" /> {{mymodel}} 

Answer 5

 <input type="text" (keypress)="myMethod(myInput.value)" #myInput /> 

归档.ts

 myMethod(value:string){ ... ... } 

Answer 6

（keyup）事件是你最好的select。

让我们看看为什么：

1. （改变）就像你提到的触发器只有当input失去焦点，因此是有限的使用。
2. （按键）会在按键时触发，但不会在某些按键（如退格键）上触发。
3. （keydown）每次按下一个键时触发。 因此总是滞后1个字符; 因为它在按键注册之前获取元素状态。
4. （keyup）会在每次按键事件完成时触发，因此也包含最近的字符。

所以（keyup）是最安全的，因为它…

• 不同于（更改）事件，每个击键都会注册一个事件
• 没有像（keydown）事件那样的延迟
• 包括（按键）忽略的键