Блог

Главная - Вопросы по программированию - Установить фокус на inputText в Blazor без JS

Установить фокус на inputText в Blazor без JS

#c# #blazor

#c# #blazor

Вопрос:

Не могли бы вы сказать мне, возможно ли установить фокус на inputText в Blazor без JS, используя .Net 5? Может быть, я ошибаюсь, но, учитывая случаи в документации, мне нужна ссылка на ввод (не inputText), прежде чем я установлю фокус. Но, может быть, есть способ сделать это? С наилучшими пожеланиями.

Ответ №1:

Исходный код для входных компонентов

Например, так я унаследовал InputText и расширил его, чтобы получить ссылку на базовый элемент ввода: builder.AddElementReferenceCapture(5, (__ref) => { Element = __ref; }); 

 public class FInputText : InputText, IFocusInput
{
    public ElementReference Element { get; set; }
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        builder.AddAttribute(2, "class", CssClass);
        builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));
        builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        builder.AddElementReferenceCapture(5, (__ref) => { Element = __ref; });
        builder.CloseElement();
    }
}

Теперь, когда у меня есть доступ к ссылке на элемент, простое расширение дает мне ту же функциональность, FocusAsync() что и .

 public static class FocusExtensions
{
    public static ValueTask FocusAsync(this IFocusInput focusInput)
        => focusInput.Element.FocusAsync();
}

Я создал пакет NuGet, выполнив 5 из них.

Вот репозиторий GitHub для исходного кода.

Ответ №2:

В .Net 5 вы можете использовать метод FocusAsync для ElementReference для фокусировки пользовательского интерфейса на этом элементе.

 <button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

Метки: