更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?

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

第二次绑定在每个按键上都发生变化。


当前回答

通过将[(x)]语法分解成两部分来使用ngModelChange,即属性绑定和事件绑定:

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

它也适用于退格键。

其他回答

我一直在使用keyup在一个数字字段,但今天我注意到在chrome的输入有上升/下降按钮来增加/减少的值,这是不被keyup识别。

我的解决方案是使用keyup和更改一起:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

初步测试表明,这工作良好,将在进一步测试后,如果发现任何错误。

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

更新

https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event

警告:由于此事件已弃用,您应该使用beforeinput或keydown代替。

通过将[(x)]语法分解成两部分来使用ngModelChange,即属性绑定和事件绑定:

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

它也适用于退格键。

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

归档.ts

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

(按键)项目是你最好的选择。

让我们来看看原因:

(变化)就像你提到的,只有当输入失去焦点时才会触发,因此用处有限。 (按键)在按键时触发,但在某些按键(如退格键)时不触发。 (keydown)每次按下键时触发。因此总是滞后1个字符;因为它获得了注册击键之前的元素状态。 (keyup)是你最好的选择,因为它会在每次按键推送事件完成时触发,因此这也包括最近的字符。

所以(keyup)是最安全的,因为它…

与(change)事件不同,在每次击键时都注册一个事件 包括(按键)忽略的键 没有延迟不像(keydown)事件