Фокусировка элемента в Blazor

После недавней работы над игрой Wordlzor мне нужно было добавить довольно простую функциональность: фокусировать всю игру при входе.

Это необходимо было сделать, потому что пользователь действительно мог печатать в игре, а не только использовать экранную клавиатуру.

Файл Javascript

Для этого нам нужно создать файл Javascript с именем app.js, который будет содержать функцию

[[[ТОК_1]]]

После того, как мы это сделали, нам нужно включить скрипт в файл index.html:

[[[ТОК_3]]]

Компонент Blazor

После инициализации сценария нам нужно найти элемент, на котором можно сосредоточиться, поэтому в любом из наших компонентов нам нужно ссылаться на этот элемент на объект.

Итак, в наш компонент blazor давайте добавим div с Свойство @ref:

[[[ТОК_4]]]

Затем в логике компонента вы можете использовать это свойство как ElementReference:

[[[ТОК_6]]]

Внедрение JSInterop

Теперь, чтобы вызвать функцию, которая есть в нашем файле Javascript, нам нужно использовать JSInterop.

Прежде всего, мы должны внедрить его в компонент со следующим синтаксисом:

[[[ТОК_8]]]

После внедрения сервиса мы теперь можем вызывать любой из имеющихся у него методов, например InvokeVoidAsync, который будет вызывать функцию:

[[[ТОК_10]]]

И когда вы вызываете функцию Focus(), она фокусирует элемент, который мы создали, очевидно, вы можете провести рефакторинг и передать сам элемент в качестве параметра.

Если вы хотите посмотреть, как я это реализовал, взгляните на исходный код Wordlzor, я использовал его для оповещений и фокусировки при закрытии модального окна инструкций.