एचटीएमएल 5 ईवेंट हैंडलिंग (ऑनफोकस और ऑनफोकसआउट) कोणीय 2 का उपयोग करके

Question

मेरे पास एक दिनांक फ़ील्ड है और मैं डिफ़ॉल्ट रूप से स्थान धारक को निकालना चाहता हूं।

मैं प्लेसहोल्डर को हटाने के लिए जावास्क्रिप्ट onfocusऔर onfocusoutघटनाओं का उपयोग कर रहा हूं ।

क्या कोई कोणीय 2 निर्देश का उपयोग करने में मदद कर सकता है?

<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()">

भी आप इस तरह का उपयोग कर सकते हैं: -

कुछ लोग पसंद करते हैं, जो उपसर्ग विकल्प, विहित रूप में जाना जाता है:

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

इवेंट बाइंडिंग के बारे में अधिक जानकारी यहाँ देखें ।

आपको अपने उपयोग के मामले के लिए HostListner का उपयोग करना होगा

जब कोणीय तत्व निर्दिष्ट घटना का उत्सर्जन करता है, तो कोणीय सजाया विधि को लागू करेगा। @HostListenerकॉलबैक / इवेंट हैंडलर विधि के लिए एक डेकोरेटर है

मेरा अद्यतन कार्य प्लंकर देखें।

काम करने का उदाहरण Working Plunker

अपडेट करें

कुछ अन्य घटनाओं को कोणीय में उपयोग किया जा सकता है -

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

Comments

आपने अपने निर्देश का उपयोग कहां किया है dateinput?

— परदीप जैन

@vishnu मेरी अपडेट की हुई तख्ती देखें

— जैन

कुछ ध्यान दें, यदि आप डिफ़ॉल्ट HTML कार्यान्वयन का उपयोग करते हैं, तो यह निर्दिष्ट फ़ंक्शन को कॉल करते समय वैश्विक गुंजाइश का उपयोग कर सकता है। उदाहरण के लिए: onfocusout="someMethod()" someMethod()इस मामले में, वैश्विक दायरे में बुलाया जाएगा। यही कारण है कि इस मामले में कोणीय का उपयोग करना मूल्यवान है।

— kbpontius

@ user5365075 मैंने ऐसा कोई भी अपडेट नहीं देखा, यहाँ देखें ng6 डेमो स्टैकब्लिट्ज़.com/edit/… का उपयोग करते focus हुए

— जैन

मेरी गलती, focusसमर्थित इनपुट्स और टेक्स्टारस पर काम करेगी, लेकिन अगर आपके पास कस्टम घटक हैं जो इसका समर्थन नहीं करते हैं, तो आप focusinइसके बजाय उपयोग कर सकते हैं :)

— user5365075

Answer 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

Answer 3

मैंने एक छोटा निर्देश बनाया है जो टैबइंडेक्स विशेषता के साथ बाँधता है। यह है-फोकस क्लास को गतिशील रूप से जोड़ता / हटाता है।

@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");
    }
}

Answer 4

समाधान यह है:

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

Answer 5

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

मेरे लिए प्रदीप जैन से काम करता है