Winkel 2/4 setzen Sie den Fokus auf input-element

Wie kann ich einstellen, dass der Fokus auf einem input durch (click -) event? Ich habe diese Funktion im Ort, aber ich bin eindeutig etwas fehlt (Winkel-Neuling hier)

sTbState: string = 'invisible';
private element: ElementRef;
toggleSt() {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    (this.element.nativeElement).find('#mobileSearch').focus();
  }
}
InformationsquelleAutor Dev | 2017-06-11
  1. 14

    Können Sie die @ViewChild Dekorateur für diese. Dokumentation ist bei https://angular.io/api/core/ViewChild.

    Hier ist eine funktionierende plnkr: http://plnkr.co/edit/KvUmkuVBVbtL1AxFvU3F

    Diese Kernaussage der code kommt auf, geben einen Namen für das input-element und die Verkabelung bis ein click-Ereignis in Ihrer Vorlage.

     <input #myInput />
 <button (click)="focusInput()">Click</button>

    In der Komponente, implementieren @ViewChild oder @ViewChildren suchen für das element(s), dann implementieren Sie den click-handler zum ausführen der Funktion, die Sie brauchen.

    export class App implements AfterViewInit {
  @ViewChild("myInput") inputEl: ElementRef;

  focusInput() {
    this.inputEl.nativeElement.focus()
  }

    Klicken Sie nun auf die Taste und dann die blinkende Einfügemarke erscheint innerhalb des Eingabefeldes. Verwendung von ElementRef wird nicht empfohlen, da ein Sicherheitsrisiko,
    wie XSS-Angriffe ( https://angular.io/api/core/ElementRef ), und weil es Ergebnisse in weniger tragbaren Komponenten.

    Hüten Sie sich auch davor, dass die inputEl variable wird erst zur Verfügung, wenn ngAfterViewInit event feuert.

    • können Sie bitte helfen Sie für ein Beispiel mit Winkel-marterial-Eingang ?
    • gearbeitet eckig-material für mich
    InformationsquelleAutor Doguhan Uluca
  2. 4

    Input-element als native Elemente in der ts-Datei.

    //HTML CODE

<input #focusTrg />
<button (click)="onSetFocus()">Set Focus</button>

//TS CODE
@ViewChild("focusTrg") trgFocusEl: ElementRef;

  onSetFocus() {
     setTimeout(()=>{
      this.trgFocusEl.nativeElement.focus();
    },100);
  }

    müssen wir this.trgFocusEl.nativeElement.focus(); im setTimeout() dann werde es funktionieren, sonst wird es werfen undefined Fehler.

    • timeout für mich gearbeitet. Dank
    InformationsquelleAutor Kapil Thakkar
  3. 1

    versuchen Sie dies :

    in Sie HTML Datei:

    <button type="button" (click)="toggleSt($event, toFocus)">Focus</button>

<!-- Input to focus -->
<input #toFocus>

    in Ihrem ts Datei :

    sTbState: string = 'invisible';

toggleSt(e, el) {
  this.sTbState = (this.sTbState === 'invisible' ? 'visible' : 'invisible');
  if (this.sTbState === 'visible') {
    el.focus();
  }
}
    • Ich reparierte einige typos/Fehler in deiner Antwort.
    • vielen Dank 🙂
    • Ich danke Ihnen so sehr für Ihre Antworten. Ich versuchte es, aber es wurde keine Veränderung und keine DOM-Fehler auf der Konsole. Ich habe vergessen zu importieren etwas in der ts - Datei?
    InformationsquelleAutor Mohamed Ali RACHID
  4. 1

    versuchen.

    //on .html file
<button (click)=keyDownFunction($event)>click me</button>

//on .ts file
//navigate to form elements automatically.
keyDownFunction(event) {
    //specify the range of elements to navigate
    let maxElement = 4;
    if (event.keyCode === 13) {
        //specify first the parent of container of elements
        let container = document.getElementsByClassName("myForm")[0];
        //get the last index from the current element.
        let lastIndex = event.srcElement.tabIndex ;
        for (let i=0; i<maxElement; i++) {
            //element name must not equal to itself during loop.
            if (container[i].id !== event.srcElement.id && 
                lastIndex < i) {   
                lastIndex = i;                 
                const tmp = document.getElementById(container[i].id);
                (tmp as HTMLInputElement).select();
                tmp.focus();
                event.preventDefault();
                return true;
            }
        }           
    }
}
    InformationsquelleAutor M.Laida
Schreibe einen Kommentar