【问题标题】：HTML5 event handling(onfocus and onfocusout) using angular 2使用 Angular 2 的 HTML5 事件处理（onfocus 和 onfocusout）
【发布时间】：2016-09-11 20:22:42
【问题描述】：

我有一个日期字段，我想默认删除占位符。

我正在使用 javascript onfocus 和 onfocusout 事件来删除占位符。

任何人都可以帮助使用 angular2 指令吗？

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

我尝试以这种方式解决，但我在重置输入字段类型时遇到问题。

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }

【问题讨论】：

标签： angular

【解决方案1】：

尝试使用(focus) 和(focusout) 而不是onfocus 和onfocusout

像这样：-

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

你也可以这样使用：-

有些人更喜欢 on- 前缀替代方案，称为规范形式：

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

了解更多关于事件绑定see here。

您必须将 HostListner 用于您的用例

当宿主元素发出指定的事件时，Angular 会调用被装饰的方法。@HostListener 是回调/事件处理方法的装饰器

查看我的更新工作 Plunker。

工作示例 Working Stackblitz

更新

其他一些事件可以用在angular中-

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

【讨论】：

你在哪里使用了名为dateinput的指令？
@vishnu 查看我的更新 plnuker
需要注意的是，如果使用默认的HTML实现，调用指定函数时可能会使用全局作用域。例如：onfocusout="someMethod()"someMethod()，在这种情况下，将在全局范围内调用。这是在这种情况下使用 Angular 很有价值的另一个原因。
@user5365075 我没有看到任何此类更新，请参见此处使用focus stackblitz.com/edit/… 的ng6 演示
我的错误，focus 将适用于支持的输入和文本区域，但如果您有不支持它的自定义组件，您可以改用 focusin :)

【解决方案2】：

如果您想在组件的每个输入上动态捕捉焦点事件：

import { AfterViewInit, Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
       // document.getElementsByTagName('input') : to gell all Docuement imputs
       const inputList = [].slice.call((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

在此处查看完整代码：https://stackblitz.com/edit/angular-93jdir

【讨论】：

【解决方案3】：

解决办法是这样的：

  <input (click)="focusOut()" type="text" matInput [formControl]="inputControl"
  [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
     <mat-option (onSelectionChange)="submitValue($event)" *ngFor="let option of 
      options | async" [value]="option">
      {{option.name | translate}}
     </mat-option>
  </mat-autocomplete>

TS
focusOut() {
this.inputControl.disable();
this.inputControl.enable();
}

【讨论】：

【解决方案4】：

我创建了一个与 tabindex 属性绑定的小指令。它动态添加/删除 has-focus 类。

@Directive({
    selector: "[tabindex]"
})
export class TabindexDirective {
    constructor(private elementHost: ElementRef) {}

    @HostListener("focus")
    setInputFocus(): void {
        this.elementHost.nativeElement.classList.add("has-focus");
    }

    @HostListener("blur")
    setInputFocusOut(): void {
        this.elementHost.nativeElement.classList.remove("has-focus");
    }
}

【讨论】：

【解决方案5】：

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

Pardeep Jain 为我工作

【讨论】：