Blazor の要素にフォーカスする

最近行った Wordlzor ゲームに取り組んだ後、非常に単純な機能を追加する必要がありました。それは、ゲームに入るときにゲーム全体にフォーカスするというものです。

ユーザーはスクリーン キーボードを使用するだけでなく、実際にゲーム上で入力できるため、これを行う必要がありました。

JavaScript ファイル

これを行うには、関数を保持する app.js という Javascript ファイルを作成する必要があります。

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

それが完了したら、スクリプトを index.html ファイルに含める必要があります。

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

ブレザーコンポーネント

スクリプトを初期化したら、注目する要素を見つける必要があるため、どのコンポーネントでもその要素をオブジェクトに参照する必要があります。

そこで、blazor コンポーネントに を含む div を追加しましょう。 @ref プロパティ:

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

次に、コンポーネント ロジックでプロパティを ElementReference として持つことができます。

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

JSInterop の挿入

ここで、JavaScript ファイルにある関数を呼び出すには、JSInterop を使用する必要があります。

まず最初に、次の構文を使用してコンポーネントにそれを注入する必要があります。

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

サービスが挿入されると、関数を呼び出す InvokeVoidAsync など、そのサービスが持つメソッドを呼び出すことができるようになります。

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

そして、関数 Focus() を呼び出すと、作成した要素にフォーカスされます。明らかに、要素自体をリファクタリングしてパラメータとして渡すことができます。

私がそれをどのように実装したかを見たい場合は、Wordlzor ソース コードを見てください。命令モーダルを閉じるときのアラートとフォーカスに使用しました。