如何将焦点始终设置为 Angular 中的输入

Question

我只想通过一个文本输入来控制我的应用程序，因此我需要始终将焦点放在它上面（以防止用户通过单击页面上的某处等意外失去焦点）。公平地说，我什至不知道我该怎么做。

我尝试在这个输入上使用 html 的自动对焦，然后检查它是否失去焦点。但是我不知道，如何"revive"这个重点呢。这是我的代码：

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>

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

}

这个reviveFocus函数怎么用，有什么办法可以让焦点再次聚焦到这个输入上吗？还是 "all-time" 聚焦的其他方式？

Answer 1

您应该改用 (blur) 事件绑定。对于 blurred/losing 焦点事件，我认为这是正确的绑定关键字。

首先，我们将 blur 事件绑定到 onBlur() 方法。接下来，我们在输入元素上设置一个模板引用变量。

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

并且在您的 component.ts 上，我们会将元素设置为在触发 onBlur 时聚焦。

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

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

我已经在 here 上做了一个演示。

如何将焦点始终设置为 Angular 中的输入

How can I set focus always on input in Angular

typescript

angular

angular6