typescript - Hur kan jag alltid sätta fokus på input i Angular

Jag vill kontrollera min applikation ENDAST från ett textinmatningsfält, så jag behöver alltid ha fokus på det (för att förhindra att användare av misstag tappar fokus genom att klicka någon annanstans på sidan etc.). Och för att vara ärlig vet jag inte ens hur jag kan göra detta.

Jag försökte använda HTML:s autofocus på detta inputfält och sedan kontrollera om det förlorar fokus. Men jag vet inte hur man "återupplivar" detta fokus på det. Detta är min kod:

HTML-fil:

<div fxLayout fxLayoutAlign="center">
  <div fxFlex="80" class="operations">

    <div class="H-opt">Użytkownik: <span>{{ActualUser}}</span></div>
    <div class="H-opt">Magazyn źródłowy: <span></span></div>
    <div class="H-opt">Magazyn docelowy: <span></span></div>

    <input matInput [(ngModel)]="codeExec" (focusout)="reviveFocus()" (keyup.enter)="execAction($event.target.value)" autofocus >

  </div>

</div>

TS-fil:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../shared/services/auth.service';
import { DatabaseService } from '../../../shared/services/database.service';
import { MatSnackBar, MatDialog } from '@angular/material';

@Component({
  selector: 'app-cbisgate-userdash',
  templateUrl: './cbisgate-userdash.component.html',
  styleUrls: ['./cbisgate-userdash.component.css']
})
export class CbisgateUserdashComponent implements OnInit {

  constructor(public dialog: MatDialog, private authService: AuthService, private databaseService: DatabaseService, public snackBar: MatSnackBar) { }

  codeExec: string = "";

  ActualUser;
  DepotFrom;
  DepotTo;

  clearCodeExec() {
    this.codeExec = "";
  }

  reviveFocus() {
    console.log("I'm trying to revive this input!");
  }

  execAction(code) {
    this.ActualUser = code;
    console.log(code);
    this.clearCodeExec();
  }

  ngOnInit() {
  }

}

Hur kan jag använda denna reviveFocus-funktion, finns det något sätt att återigen sätta fokus på detta inputfält? Eller finns det ett annat sätt att göra "alltid" fokus?

Svar #1

Du bör använda (blur)-händelsebindningen istället. Jag tror att det är rätt bindningsnyckel när det gäller händelser för att förlora fokus.

Först binder vi blur-händelsen till onBlur()-metoden. Därefter sätter vi en mallreferensvariabel på inmatningselementet.

<input matInput #yourInput (blur)="onBlur($event)">

Och i din component.ts kommer vi att ställa in elementet för att fokusera varje gång onBlur utlöses.

@ViewChild('yourInput', {static: false}) yourInput: ElementRef;

onBlur(event) {
  this.yourInput.nativeElement.focus()
}

Jag har gjort en demo här.

Relaterade artiklar