Question

在Angular2中如何知道任何输入字段何时失去焦点..！如果我在表单上使用observable：

form.valueChange.subscribe...

不会工作，因为我真的想知道一个字段何时失去它的模糊（焦点）所以我可以更新我的商店（如果我在失去焦点之前更新商店，我的光标在文本输入上移动到结束，因为数据交换，这看起来很奇怪）

当然我也可以在每个输入上添加(change)=""，但我有很多＆＃39; em ...

我在考虑各种各样的事情：

this.form.valueChanges.debounceTime(1000).subscribe((changes:any) => {
  if (this.form.dirty){
    this.appStore.dispatch(this.resellerAction.updateResellerInfo(changes))
  }
});

但问题是脏污仍然很脏，所以它陷入永久性的变化检测循环......

TX

肖恩

Answer 1

blur事件不会冒泡，因此我们需要直接侦听每个输入元素。 Angular为这种情况提供了一个很好的解决方案。

适用于模板中所有输入元素的指令。

此指令使用主机侦听器侦听选择器应用的所有元素上的input-blur事件，并转发冒泡的@Directive({ selector: 'input,select', host: {'(blur)': 'onBlur($event)'} }) class BlurForwarder { constructor(private elRef:ElementRef, private renderer:Renderer) {} onBlur($event) { this.renderer.invokeElementMethod(this.elRef.nativeElement, 'dispatchEvent', [new CustomEvent('input-blur', { bubbles: true })]); // or just // el.dispatchEvent(new CustomEvent('input-blur', { bubbles: true })); // if you don't care about webworker compatibility } }事件：

BlurForwarder

通过将directives: [...]指令添加到input-blur，它将应用于模板中与选择器匹配的所有元素。
host-listener侦听冒泡@Component({ selector: 'my-component', directives: [BlurForwarder], host: {'(input-blur)':'onInputBlur($event)'}, template: ` <form> <input type="text" [(ngModel)]="xxx"> <input type="text" [(ngModel)]="yyy"> <input type="text" [(ngModel)]="zzz"> </form>` }) { onInputBlur(event) { doSomething(); } }事件并调用我们的事件处理程序：

SHA256(SHA1("156")) = e8fed31bea496eb025ac3b1c09e69da975cfd1faf446fbef26cbfa265f5285e7
SHA1(SHA256("156")) = b2e10b1aec52c913d4f77060af3232105fc6d115

Answer 2

为什么不在DOM中使用focusout默认气泡

这是一个简单的指令，捕获焦点并检查输入值是否为空，然后将值设置为零：

@Directive({
  selector: '[blankToZero]'
})
export class BlankToZeroDirective {
  constructor(private elementHost: ElementRef) { }

  @HostListener('focusout')
  ensureInput(): void {
    if (Util.isNullOrEmpty(this.elementHost.nativeElement.value)) {
      this.elementHost.nativeElement.value = 0;
    }
  }
}

在Angular2中如何知道何时任何表单输入字段失去焦点

2 个答案: