Concentrer un élément dans Blazor

Après avoir travaillé sur le jeu Wordlzor que j’ai réalisé récemment, j’avais besoin d’ajouter une fonctionnalité assez simple : concentrer l’intégralité du jeu en entrant.

Cela devait être fait car l’utilisateur pouvait réellement taper sur le jeu et pas seulement utiliser le clavier à l’écran.

Fichier Javascript

Pour ce faire, nous devons créer un fichier Javascript appelé app.js qui contiendra une fonction

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

Après avoir fait cela, nous devons inclure le script dans le fichier index.html :

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

Composant Blazor

Une fois que nous avons initialisé le script, nous devons trouver un élément sur lequel nous concentrer, donc dans n’importe lequel de nos composants, nous devons référencer cet élément à un objet.

Donc, dans notre composant Blazor, ajoutons un div avec le Propriété @ref :

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

Ensuite, dans la logique du composant, vous pouvez avoir la propriété sous la forme d’un ElementReference :

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

Injection de JSInterop

Maintenant, pour appeler la fonction que nous avons dans notre fichier Javascript, nous devons utiliser JSInterop.

Tout d’abord il faut l’injecter sur le composant avec la syntaxe suivante :

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

Avec le service injecté, nous pouvons désormais appeler n’importe laquelle de ses méthodes, comme InvokeVoidAsync, qui appellera la fonction :

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

Et lorsque vous appelez la fonction Focus(), elle focalisera l’élément que nous avons créé, vous pouvez évidemment refactoriser et passer l’élément lui-même en tant que paramètre.

Si vous voulez voir comment je l’ai implémenté, jetez un œil au code source de Wordlzor, je l’ai utilisé pour les alertes et la concentration lors de la fermeture du modal d’instruction.