Búsqueda de sitios web

typescript - ¿Cómo puedo establecer el enfoque siempre en un input en Angular?

Quiero controlar mi aplicación SOLO desde un campo de texto, así que necesito tener el foco SIEMPRE en él (para evitar que los usuarios pierdan este foco accidentalmente al hacer clic en algún lugar de la página, etc.). Y para ser honesto, ni siquiera sé cómo puedo hacer esto.

Intenté usar el autofocus de html en este input y luego verificar si pierde su enfoque. Pero no sé cómo "revivir" este enfoque en él. Este es mi código:

Archivo HTML:

<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>

Archivo TS:

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

}

¿Cómo puedo usar esta función reviveFocus, hay alguna manera de volver a enfocar este input? ¿O hay otra forma de hacer que el enfoque sea "siempre"?

Respuesta #1

Deberías usar el enlace de evento (blur) en su lugar. Creo que esa es la palabra clave de enlace correcta cuando se trata de eventos de desenfoque/pérdida de enfoque.

Primero, enlazamos el evento blur al método onBlur(). A continuación, establecemos una variable de referencia de plantilla en el elemento de entrada.

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

Y en tu component.ts, estableceremos el elemento para que obtenga el enfoque cada vez que se active onBlur.

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

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

He hecho una demostración aquí.

Artículos relacionados