c# - 有没有办法在没有 JavaScript 的情况下在 Blazor 中同时使用 @onfocus 和 HTML 焦点？

问题描述

我对 Blazor 很陌生，但是当元素聚焦时，我需要选择整个输入字段。

在 HTML 中，我可以使用这个：

<input onfocus="this.select();">

然而问题是：我已经有一个绑定到 @onfocus 事件的 Blazor 方法：

<input @onfocus="@OnFocus"

我不能同时使用它们，因为我在 Visual Studio 中收到以下错误：

这意味着我需要找到一种在 OnFocus() 方法中以某种方式选择输入字段的方法。我知道我可以使用 JavaScript (JSInterop) 解决这个问题，但我希望有一种方法可以在不使用 JavaScript 的情况下做到这一点。

当前 OnFocus() 方法：

private void OnFocus (FocusEventArgs e) {
   if (String.IsNullOrEmpty(this.inputValue)) {
     this.inputValue = Utils.SetDefaultValue();
   }
   Utils.SelectInput(this.index); <-- current working JSInterop method I want to get rid off
}

标签： c#htmlblazorblazor-webassembly

我想这应该可行：

<input @bind="Value" @onfocus ="@((FocusEventArgs args) =>  OnFocus(args))" onfocusin="this.select();">

@code
    {
private string Value { get; set; } = "MyValue";


private void OnFocus(FocusEventArgs e)
{
    
 }
}

有没有办法在没有 JavaScript 的情况下在 Blazor 中同时使用 @onfocus 和 HTML 焦点？

注意：@onfocus 是一个编译器指令，它创建如下代码：

__builder.AddAttribute(6, "onfocus", 
EventCallback.Factory.Create<FocusEventArgs>(this, (FocusEventArgs args) =>  OnFocus(args) ));

如您所见，此代码在呈现时将事件处理程序附加到 JS“onfocus”事件，这就是为什么您不能使用它两次（导致错误）。focus 或者更确切地说是 focus()，是一个被调用来设置焦点的方法，就像 select 是一个被调用来选择文本的方法一样。

请注意，您可以使用 @onfocus 创建一个事件处理程序，您可以从中调用 JS 函数来选择代码。这是合法的。

c# - 有没有办法在没有 JavaScript 的情况下在 Blazor 中同时使用 @onfocus 和 HTML 焦点？

问题描述

解决方案

推荐阅读