typescript - Hvordan kan jeg alltid sette fokus på input i Angular

Jeg vil kontrollere applikasjonen min KUN fra ett tekstfelt, så jeg trenger å ha fokus ALLTID på det (for å forhindre at brukere ved et uhell mister dette fokuset ved å klikke et sted på siden osv.). Og for å være ærlig vet jeg ikke engang hvordan jeg kan gjøre dette.

Jeg prøvde å bruke HTMLs autofocus på dette inputfeltet og deretter sjekke om det mister fokuset. Men jeg vet ikke hvordan jeg kan «gjenopplive» dette fokuset på det. Dette er koden min:

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

}

Hvordan kan jeg bruke denne reviveFocus-funksjonen, finnes det en måte å få fokus tilbake på dette inputfeltet? Eller er det en annen måte å gjøre "alltid" fokus på?

Svar #1

Du bør bruke (blur)-hendelsesbindingen i stedet. Jeg tror det er det riktige bindingsnøkkelordet når det gjelder hendelser for å miste fokus.

Først binder vi blur-hendelsen til onBlur()-metoden. Deretter setter vi en malreferansevariabel på input-elementet.

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

Og i din component.ts vil vi sette elementet til å få fokus hver gang onBlur utløses.

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

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

Jeg har laget en demo her.

Relaterte artikler