使用角度2的 HTML5事件处理(onfocus 和 onfocus out)

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

我使用 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);
}
}
300698 次浏览
小开
最佳答案

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

像这样:-

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

你也可以这样使用:-

有些人更喜欢使用前缀形式，也就是所谓的规范形式:

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

了解更多关于事件绑定 看这里的信息。

你必须为你的用例使用 HostListner

Angular 将在宿主元素发出指定的 event 时调用修饰方法。 @HostListener是回调/事件处理程序方法的修饰符

看到我的更新工作 Plunker。

工作示例 Working Stackblitz

更新

其他一些事件可以用在角-

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

如果希望动态捕获组件上每个输入的焦点事件:

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

小开

解决办法是:

  <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();
}
小开

我创建了一个绑定 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");
}
}
小开 
<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

我在 Pardeep Jain 工作


提交答案