<इनपुट> तत्व पर ध्यान केंद्रित करें

Question 1

मैं Angular 5 के साथ एक फ्रंट-एंड एप्लिकेशन काम कर रहा हूं, और मुझे एक खोज बॉक्स छिपाना होगा, लेकिन एक बटन पर क्लिक करने पर, खोज बॉक्स प्रदर्शित और केंद्रित होना चाहिए।

मैंने निर्देशन के साथ StackOverflow पर पाए जाने वाले कुछ तरीकों की कोशिश की है, लेकिन सफल नहीं हो सकता।

यहाँ नमूना कोड है:

@Component({
   selector: 'my-app',
   template: `
    <div>
    <h2>Hello</h2>
    </div>
    <button (click) ="showSearch()">Show Search</button>
    <p></p>
    <form>
      <div >
        <input *ngIf="show" #search type="text"  />            
      </div>
    </form>
    `,
  })
  export class App implements AfterViewInit {
  @ViewChild('search') searchElement: ElementRef;

  show: false;
  name:string;
  constructor() {    
  }

  showSearch(){
    this.show = !this.show;    
    this.searchElement.nativeElement.focus();
    alert("focus");
  }

  ngAfterViewInit() {
    this.firstNameElement.nativeElement.focus();
  }

खोज बॉक्स को फ़ोकस करने के लिए सेट नहीं किया गया है।

मैं उसे कैसे कर सकता हूँ?

Question 2

इस तरह शो सर्च मेथड को संशोधित करें

showSearch(){
  this.show = !this.show;  
  setTimeout(()=>{ // this will make the execution after the above boolean has changed
    this.searchElement.nativeElement.focus();
  },0);  
}

Question 3

आपको इसके लिए html ऑटोफोकस का उपयोग करना चाहिए :

<input *ngIf="show" #search type="text" autofocus />

नोट: यदि आपका कंपोनेंट कायम है और पुन: उपयोग किया जाता है तो यह केवल पहली बार ऑटोफोकस होगा जब टुकड़ा जुड़ा हुआ है। यह एक वैश्विक डोम श्रोता होने से दूर हो सकता है जो संलग्न होने पर एक डोम टुकड़े के अंदर ऑटोफोकस विशेषता की जांच करता है और फिर इसे पुन: लागू करता है या जावास्क्रिप्ट के माध्यम से फ़ोकस करता है।

Question 4

यह निर्देश तुरंत प्रदर्शित होने के साथ ही तत्व के किसी भी पाठ पर ध्यान केंद्रित करेगा और उसका चयन करेगा। इसके लिए कुछ मामलों में सेटटाइमआउट की आवश्यकता हो सकती है, इसका अधिक परीक्षण नहीं किया गया है।

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appPrefixFocusAndSelect]',
})
export class FocusOnShowDirective implements OnInit {

  constructor(private el: ElementRef) {
    if (!el.nativeElement['focus']) {
      throw new Error('Element does not accept focus.');
    }
  }

  ngOnInit(): void {
    const input: HTMLInputElement = this.el.nativeElement as HTMLInputElement;
    input.focus();
    input.select();
  }
}

और HTML में:

 <mat-form-field>
     <input matInput type="text" appPrefixFocusAndSelect [value]="'etc'">
 </mat-form-field>

Question 5

मैं इस पर (कोणीय 7 समाधान) में जा रहा हूँ

input [appFocus]="focus"....

import {AfterViewInit, Directive, ElementRef, Input,} from '@angular/core';

@Directive({
  selector: 'input[appFocus]',
})
export class FocusDirective implements AfterViewInit {

  @Input('appFocus')
  private focused: boolean = false;

  constructor(public element: ElementRef<HTMLElement>) {
  }

  ngAfterViewInit(): void {
    // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
    if (this.focused) {
      setTimeout(() => this.element.nativeElement.focus(), 0);
    }
  }
}

Question 6

यह बिना सेट टाइमआउट के i Angular 8 काम कर रहा है:

import {AfterContentChecked, Directive, ElementRef} from '@angular/core';

@Directive({
  selector: 'input[inputAutoFocus]'
})
export class InputFocusDirective implements AfterContentChecked {
  constructor(private element: ElementRef<HTMLInputElement>) {}

  ngAfterContentChecked(): void {
    this.element.nativeElement.focus();
  }
}

स्पष्टीकरण: ठीक है इसलिए यह काम करता है: परिवर्तन का पता लगाना। यह एक ही कारण है कि setTimout काम करता है, लेकिन जब Angular में एक setTimeout चलाते हैं तो यह Zone.js को बायपास कर देगा और सभी चेक को फिर से रन करेगा, और यह तब काम करता है जब सेट टाइमआउट पूरा हो जाता है। सही जीवन चक्र हुक (AfterContentChecked) के साथ एक ही परिणाम तक पहुंचा जा सकता है, लेकिन अतिरिक्त चक्र नहीं चलाया जाएगा कि लाभ के साथ। सभी परिवर्तनों की जांच और पारित होने पर फ़ंक्शन आग जाएगा, और हुक के बाद चलता है AfterContentInit और DoCheck। अगर मैं यहाँ गलत हूँ तो कृपया मुझे सुधारें

Https://angular.io/guide/lifecycle-hooks पर एक से अधिक जीवनचक्र और परिवर्तन का पता लगाने

अद्यतन : मुझे यह करने के लिए एक और भी बेहतर तरीका मिल गया है अगर एक कोणीय सामग्री CDK, a11y-package का उपयोग किया जाता है। मॉड्यूल में पहला आयात A11yModule उस घटक की घोषणा करने के लिए जिसमें आपके पास इनपुट-फ़ील्ड है। उसके बाद cdkTrapFocus और cdkTrapFocusAutoCapture निर्देशों का उपयोग करें और HTML में इस तरह का उपयोग करें और इनपुट पर इनपुट सेट करें:

<div class="dropdown" cdkTrapFocus cdkTrapFocusAutoCapture>
    <input type="text tabIndex="0">
</div>

हमारे पास पोजिशनिंग और जवाबदेही के बारे में हमारे ड्रॉपडाउन के साथ कुछ मुद्दे थे और इसके बजाय cdk से OverlayModule का उपयोग करना शुरू किया, और A11yModule का उपयोग करने वाला यह तरीका त्रुटिपूर्ण काम करता है।

Question 7

HTML में ही कोणीय में, आप एक बटन के क्लिक पर इनपुट पर ध्यान केंद्रित कर सकते हैं।

<button (click)="myInput.focus()">Click Me</button>

<input #myInput></input>

Question 8

बूलियन को बदलने के बाद निष्पादन करने के लिए और उस समय के उपयोग से बचें जो आप कर सकते हैं:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

showSearch(){
  this.show = !this.show;  
  this.cd.detectChanges();
  this.searchElement.nativeElement.focus();
}

Question 9

एक DOM विशेषता भी है cdkFocusInitialजो इनपुट पर मेरे लिए काम करती है। आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं: https://material.angular.io/cdk/a11y/overview

Question 10

केवल कोणीय टेम्पलेट का उपयोग कर

<input type="text" #searchText>

<span (click)="searchText.focus()">clear</span>

Question 11

घटक का html:

<input [cdkTrapFocusAutoCapture]="show" [cdkTrapFocus]="show">

घटक का नियंत्रण:

showSearch() {
  this.show = !this.show;    
}

..और @ कोणीय / सीडीके / a11y से आयात A11yModule के बारे में मत भूलना

import { A11yModule } from '@angular/cdk/a11y'

Question 12

मेरे पास एक ही परिदृश्य है, यह मेरे लिए काम करता है लेकिन आपके पास "छिपाने / दिखाने" की सुविधा नहीं है। तो शायद आप पहले यह देख सकते हैं कि क्या आपको फ़ोकस मिलता है जब आपके पास फ़ील्ड हमेशा दिखाई देता है, और फिर हल करने की कोशिश करें कि जब आप दृश्यता बदलते हैं तो काम क्यों नहीं करता है (शायद इसलिए आपको नींद या एक वादा लागू करने की आवश्यकता है)

ध्यान केंद्रित करने के लिए, यह एकमात्र परिवर्तन है जिसे आपको करने की आवश्यकता है:

आपका Html चटाई इनपुट होना चाहिए:

<input #yourControlName matInput>

अपने टीएस वर्ग में, इस तरह का संदर्भ चर खंड में (

export class blabla...
    @ViewChild("yourControlName") yourControl : ElementRef;

आपका बटन ठीक है, कॉलिंग:

  showSearch(){
       ///blabla... then finally:
       this.yourControl.nativeElement.focus();
}

और बस। आप इस समाधान को इस पोस्ट पर देख सकते हैं जो मुझे मिला, इसलिए धन्यवाद -> https://codeburst.io/focusing-on-form-elements-the-angular-way-e9a78725c04f

Question 13

आसान तरीका भी यही है।

let elementReference = document.querySelector('<your css, #id selector>');
    if (elementReference instanceof HTMLElement) {
        elementReference.focus();
    }