Blazor에서 요소에 초점 맞추기

최근에 했던 Wordlzor 게임을 작업한 후, 매우 간단한 기능을 추가해야 했습니다. 즉, 게임에 들어갈 때 전체 게임에 집중해야 했습니다.

사용자가 화면 키보드를 사용할 뿐만 아니라 실제로 게임에 입력할 수 있기 때문에 이 작업이 필요했습니다.

자바스크립트 파일

이를 위해서는 함수를 담을 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 소스 코드를 보시면 됩니다. 명령어 모달을 닫을 때 경고와 포커스에 사용했습니다.