Blazorで任意の要素にフォーカスを設定する方法

はじめに

Blazorは、C#と.NETを使用してWebフロントエンドを構築するための非常に人気のあるフレームワークです。
この記事では、Blazorで特定の入力要素にフォーカスを設定する方法を紹介します。これにより、ページの読み込み後やボタンのクリックなど、任意のタイミングで特定の入力エレメントにフォーカスを移動することができます。

サンプルコード

1. まず、HTML要素への参照を取得するためにrefを使用します。この例では、テキストボックスに対する参照を取得します。

<input @ref="inputReference" />
<button @onclick="SetFocus">フォーカスを設定</button>

2. 次に、C#のコード部分で、inputReferenceを使用してフォーカスを設定するSetFocusメソッドを実装します。

@code {
    private ElementReference inputReference;

    private async Task SetFocus()
    {
        await inputReference.FocusAsync();
    }
}

こちらのSetFocusメソッドは、ボタンをクリックすると呼び出され、指定したFocusAsyncメソッドでテキストボックスにフォーカスを設定します。

以上の方法で、Blazorを使用して任意の入力要素に簡単にフォーカスを設定することができます。このテクニックを使用すれば、ユーザーの操作をよりスムーズに導くなど、さまざまなシチュエーションでのUXの向上が期待できます。