HTML5 olay işleme (onfocus ve onfocusout) açısal 2'yi kullanma

Question

Bir tarih alanım var ve yer tutucuyu varsayılan olarak kaldırmak istiyorum.

Ben yer tutucu kaldırmak için olaylar onfocusout ve onfocus javascript kullanıyorum.

Herhangi bir kişi angular2 yönergesini kullanarak yardımcı olabilir mi?

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

Bu şekilde çözmeyi deniyorum, ancak giriş alanı türünü sıfırlarken sorun yaşıyorum.

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

deneyin (focus) kullanabilir ve bunun gibi yerine onfocus ait (focusout) ve onfocusout

için: - Ayrıca

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

böyle kullanabilirsiniz: -

bazı insanlar tercih kanonik form olarak bilinen öneki alternatif:

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

see here bağlama olay hakkında daha fazla bilin.

ana bilgisayar öğesi belirtilen olay yayar zaman dekore yöntemi çağırmak olacaktır kullanımı durumda

Eğik için HostListner kullanmak zorunda. @HostListener geri arama/olay işleyicisi yöntemle

benim Güncelleme Plunker çalışma Bkz için bir dekoratör olduğunu.

Çalışma Örneği Working Plunker