Fokussieren eines Elements in Blazor

Nachdem ich kürzlich an dem Wordlzor-Spiel gearbeitet hatte, musste ich eine ziemlich einfache Funktionalität hinzufügen: Beim Betreten das gesamte Spiel fokussieren.

Dies war notwendig, da der Benutzer tatsächlich im Spiel tippen und nicht nur die Bildschirmtastatur verwenden konnte.

Javascript-Datei

Dazu müssen wir eine Javascript-Datei namens app.js erstellen, die eine Funktion enthält

window.FocusElement = (element) => {
    element.focus();
};

Nachdem wir das getan haben, müssen wir das Skript in die Datei index.html einbinden:

<script src="js/app.js"></script>

Blazor-Komponente

Sobald wir das Skript initialisiert haben, müssen wir ein Element finden, auf das wir uns konzentrieren können. Daher müssen wir in jeder unserer Komponenten dieses Element auf ein Objekt verweisen.

Fügen wir also in unserer Blazor-Komponente ein Div mit dem „.“ hinzu @ref`-Eigenschaft:

<div @ref=@elementToFocus tabindex="0" >
    This is my focus component
</div>

Dann können Sie in der Komponentenlogik die Eigenschaft als ElementReference haben:

/// <summary>
/// Reference to element
/// </summary>
private ElementReference elementToFocus;

JSInterop injizieren

Um nun die Funktion aufzurufen, die wir in unserer Javascript-Datei haben, müssen wir JSInterop verwenden.

Zuerst müssen wir es mit der folgenden Syntax in die Komponente einfügen:

[Inject]
public IJSRuntime JSRuntime { get; set; }

Nachdem der Dienst eingefügt wurde, können wir nun jede seiner Methoden aufrufen, z. B. InvokeVoidAsync, die die Funktion aufruft:

public async Task Focus()
{
    // Focus when initializing
    await JSRuntime.InvokeVoidAsync("window.FocusElement", elementToFocus);
}

Und wenn Sie die Funktion Focus() aufrufen, konzentriert sie sich auf das von uns erstellte Element. Natürlich können Sie das Element selbst umgestalten und als Parameter übergeben.

Wenn Sie sehen möchten, wie ich es implementiert habe, werfen Sie einen Blick auf den Quellcode von Wordlzor. Ich habe ihn für Warnungen und Fokussierung beim Schließen des Anweisungsmodals verwendet.