在 Blazor 中聚焦元素

在我最近制作的 Wordlzor 游戏之后，我需要添加一个非常简单的功能：进入时聚焦整个游戏。

之所以需要这样做，是因为用户实际上可以在游戏中打字，而不仅仅是使用屏幕键盘。

JavaScript 文件

为此，我们必须创建一个名为 app.js 的 Javascript 文件，该文件将保存一个函数

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

完成此操作后，我们需要将脚本包含在 index.html 文件中：

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

Blazor 组件

初始化脚本后，我们需要找到一个要关注的元素，因此在任何组件中，我们需要将该元素引用到一个对象。

因此，在我们的 blazor 组件中，让我们添加一个带有 @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 源代码，我用它来在关闭指令模式时发出警报和聚焦。