样式化 Blazor EditForm 组件 - 专注于 InputText

Question

我正在学习 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 关注 InputText？

Answer 1

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; }
    }
}

样式化 Blazor EditForm 组件 - 专注于 InputText

Styling Blazor EditForm components - focus on InputText

html

css

blazor

.net-5

InputTextSetFocus.razor

用法