এইচটিএমএল 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()">

ইভেন্ট বাঁধাই সম্পর্কে আরও জানুন এখানে দেখুন ।

আপনার ব্যবহারের ক্ষেত্রে হোস্টলিস্টনার ব্যবহার করতে হবে

হোস্ট উপাদান যখন নির্দিষ্ট ইভেন্টটি নির্গত করে তখন কৌণিক সজ্জিত পদ্ধতিতে ডাকে। @HostListenerকলব্যাক / ইভেন্ট হ্যান্ডলার পদ্ধতির জন্য একটি সজ্জাবিদ

আমার আপডেট ওয়ার্কিং প্লঙ্কার দেখুন।

কাজের উদাহরণ Working Plunker

হালনাগাদ

আরও কিছু ইভেন্ট কৌণিক ব্যবহার করা যেতে পারে -

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

Comments

আপনি যেখানে আপনার নির্দেশিকা হিসাবে নাম ব্যবহার করেছেন dateinput?

— পারদীপ জৈন

@ বিষ্ণু আমার আপডেট হওয়া প্ল্নুকারটি দেখুন

— পারদীপ জৈন

লক্ষ্য করার মতো কিছু, আপনি যদি ডিফল্ট এইচটিএমএল বাস্তবায়ন ব্যবহার করেন তবে মনোনীত ফাংশনটি কল করার সময় এটি বিশ্বব্যাপী সুযোগ ব্যবহার করতে পারে। উদাহরণস্বরূপ: onfocusout="someMethod()" someMethod()এক্ষেত্রে বিশ্বব্যাপী ডাকা হবে। এই ক্ষেত্রে অ্যাংুলার ব্যবহার করা কেন মূল্যবান তা অন্য কারণ।

— কেবিপন্টিয়াস

@ user5365075 আমি এ জাতীয় কোনও আপডেট দেখিনি, এখানে স্ট্যাকব্লিটজ 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()">

পারদীপ জৈন থেকে আমার জন্য কাজ করে