각도 2를 사용한 HTML5 이벤트 처리(포커스 및 포커스 아웃)

각도 2를 사용한 HTML5 이벤트 처리(포커스 및 포커스 아웃)

날짜 필드가 있으며 기본적으로 플레이스홀더를 제거합니다.

자바스크립트를 사용하고 있습니다.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);
      }
  }

사용해 보십시오.(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는 호스트 요소가 지정된 이벤트를 내보낼 때 장식된 메서드를 호출합니다.@HostListener 핸들러 입니다.

내 작업 플런커 업데이트를 참조하십시오.

작업 예제

갱신하다

일부 다른 이벤트는 각도에서 사용할 수 있습니다.

(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 에서 전체 코드를 확인하십시오.

탭인덱스 속성과 바인딩되는 작은 지시어를 만들었습니다.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()">

파르디프 자인에서 저를 위해 일합니다.

해결책은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/37247246/html5-event-handlingonfocus-and-onfocusout-using-angular-2