Comment donner le Focus sur un élément input avec Blazor ? -
international

Comment donner le Focus sur un élément input avec Blazor ?

partner
api

Si comme moi vous vous posez la question pour donner le focus à un élément du DOM de votre interface, ne cherchez plus, voici la solution 😉 qui est très simple ! Simple lorsque l’on a déjà fait un peu de web / javascript

Mon objectif était de redonner le focus à un élément Input lorsque l’utilisateur a omis de renseigner un champ. Voici ce que cela donne :

Blazor Focus élement DOM input

Interopérabilité  javascript

J’adore ce terme qui fait paraitre intelligent lorsqu’on le prononce ^^. Bref, il suffit d’ajouter dans votre projet un petit bout de code Javascript et donne tout simplement le focus à un élément identifié grâce à un … id , forcément.

 window.jsfunction = { focusElement: function (id) { const element = document.getElementById(id); element.focus(); } }

Enregistrer ce code dans un ficher .JS portant le nom de votre choix. Puis déclarez entre les balises Header de votre page index. Pour les applications Blazor Webassembly c’est dans le dossier wwwroot/index.html . Pour les applications Blazor Server c’est depuis le fichier _Host.cshtml.

Je pense rien vous apprendre en vous disant que c’est comme cela :

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

Et du côté du code Blazor ?

Il suffit d’ajouter l’interface IJSRuntime à votre page .razor. Comme notre code javascrpit de retourne rien, il suffira alors de l’appeler via InvokeVoidAsync :

@inject IJSRuntime js

<input Id="idPassWord" Type="password" @bind="_pass" />

<button @onclick="clickOK">Valider</button>

@code {
    private string _pass;

    private async void clickOK()
    {
        if (String.IsNullOrEmpty(_pass))
            await Focus("idPassWord");
        else
    {
            // your code
    }
    }

    public async Task Focus(string elementId)
    {
        await js.InvokeVoidAsync("jsfunction.focusElement", elementId);
    }
}

Une fois de plus, vous l’aurez compris, c’est super simple !

conditions

Christophe

Passionné par les technologies de développement .NET de Microsoft depuis Windows Phone et maintenant avec Blazor

Une réflexion sur “Comment donner le Focus sur un élément input avec Blazor ?

Laisser un commentaire

international