当放置在表格中的输入失去焦点时如何触发“focusout”事件？答案

【问题标题】：How to fire "focusout" event when focus lost of input placed in table?当放置在表格中的输入失去焦点时如何触发“focusout”事件？
【发布时间】：2018-02-16 06:10:59
【问题描述】：

我有一个table，其中input 被放置：

<tr *ngFor="let persons of ReceivedData">
  <td *ngFor="let person of persons">

    <div *ngIf="person.personId === editRowId && person.editable === true ">
        <input type="number" [(ngModel)]="person.CarCount" 
               (focusout)="focusOutFunction()"/>
    </div>                            
    <div *ngIf="person.editable === false " (click)="toggle(person)">
        {{ person.CarCount ? person.CarCount : '-' }}
    </div>

  </td>
<tr>

但是focusout 事件没有被触发。下面是处理focusout函数的方法：

focusOutFunction() {        
}

有趣的是，当input 没有放在table 中时，focusout 可以完美运行：

<input type="number" (focusout)="focusOutFunction()" />

当我在表格内聚焦时如何触发事件？

【问题讨论】：

在这种情况下可能需要使用（模糊）。
您没有收到任何浏览器错误？
这是一个工作 plnkr，用于在一个表内进行 focusout proc'ing，其设置与您的设置相似：plnkr.co/edit/Bqxnf3aGb0DdSEGYgIoc?p=preview
@Z.Bagley (blur) 也不起作用。此外，没有浏览器错误。
@Z.Bagley 感谢例如。但是我拉着头，它在我的浏览器上不起作用。我能做什么？

标签： html angular input angular2-template lost-focus

【解决方案1】：

Here's a working plnkr of focusout 在一个表内进行，其设置与您的设置相似。另一个关键是包含一个autofocus 属性：

 <input type="number" [(ngModel)]="person.CarCount" 
           (focusout)="focusOutFunction()" autofocus/>

【讨论】：

【解决方案2】：

使用blur 事件来获得焦点。

<input type="number" [(ngModel)]="person.CarCount" 
               (blur)="focusOutFunction()"/>

【讨论】：