使用角度2的HTML5事件处理（onfocus和onfocusout）

Question

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

我使用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); 
     } 
    } 

Answer 1

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

这样的： -

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

也可以使用这样的： -

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

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

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

你必须使用HostListner为您的使用情况

角当主机元件发出指定的事件将调用装饰方法。 @HostListener是回调/事件处理程序方法的装饰器

查看我的更新工作Plunker。

工作实例Working Plunker