更改事件在 angular 4 中的跨度上不起作用

Question

Angular 4 更改事件在输入类型文本下正常工作，如下所示

<input type="text" (change)="updateData($event)"/>

但是当我们编写如下代码时，它不起作用。

<span id="fname" (change)="updateData($event)"></span>

任何人都可以给我关于这种行为的垃圾洞察力吗？如果可能的话，最好的方法是实现同样的目标。

Answer 1

对于 contenteditable 你需要使用 input 事件。 Here is 文档怎么说：

The DOM input event is fired synchronously when the value of an , , or element is changed... Additionally, it fires on contenteditable editors when its contents are changed. In this case, the event target is the editing host element...

然而，

input 会在每次更改时触发，而 change 会在 focusout 上触发，因此您需要将它们组合起来。

class Component {
  tmp = ''l

  updateTmpData(e) {
    this.tmp = e.target.textContent;
  }

  updateData() {
     // use this.tmp
  }
}

... 
<span id="fname" (input)="updateTmpData(e)" (focusout)="updateData()"></span>

更改事件在 angular 4 中的跨度上不起作用

change event is not working on span in angular 4

onchange

angular