Стилизация компонентов Blazor EditForm - фокус на InputText

Я изучаю фреймворк Blazor, и в нем есть собственные элементы HTML. Я попытался стилизовать элемент InputText, но, похоже, он не работает с некоторыми свойствами CSS. Например Фокус.

Мой CSS:

    input:focus, select:focus, .inputstyle:focus {
        border: 1px solid #ff6801;
    }

Ввод HTML работает нормально, а вот InputText - нет. Мой код:

<input type="text" name="address" id="address" />
<InputText class="inputstyle" @bind-Value="@Advert.Title" />

Итак, как я могу поместить css Focus на InputText?


html css blazor .net-5
person Tomas Am    schedule 04.12.2020    source источник
comment
github.com/BrianLParker/OrakTech.Inputs/tree/master/   -  person Brian Parker    schedule 04.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

InputText - это компонент Blazor, поэтому он не может получить фокус ввода. Но вы можете сосредоточиться на его внутреннем элементе ввода ... Вы можете сделать что-то вроде этого:

Вы можете наследовать от InputText и использовать ElementReference.FocusAsync()

Примечание. Эта функция доступна только в .Net 5.0.

InputTextSetFocus.razor

@inherits InputText
  
<input @ref="inputElement"
       @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@CurrentValue"
       @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

@code {
    private ElementReference inputElement;

    protected override void OnAfterRender(bool firstRender)
    {
         base.OnInitialized();
         inputElement.FocusAsync();
       
    }

   
}

использование

@page "/"

<EditForm Model="employee">
    <InputTextSetFocus @bind-Value="@employee.ID" />
</EditForm>

@code
{
    private Employee employee = new Employee();

    public class Employee
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
}
person enet    schedule 04.12.2020