使用 Blazor 加载 DOM 后关注输入字段答案

【问题标题】：Focus on inputfield after DOM is loaded with Blazor使用 Blazor 加载 DOM 后关注输入字段
【发布时间】：2021-07-28 13:47:00
【问题描述】：

我希望我的输入字段在我打开网站时获得焦点，当我启动它时它始终关注链接。其次，我必须使用扫描仪将多个数字输入到我的输入字段中。它触发了我的函数 addToTable。所以我的号码将被添加到列表中。之后它应该清除输入字段并再次关注它，所以我可以扫描下一个数字：

<input id="LeNumber" name="LeNumber"  @onkeydown="addToTable" @onclick:preventDefault="@isPreventDefault"/>

private async void addToTable(KeyboardEventArgs args)
{

 if (args.Key != "Tab")
 {
    LeNumber += args.Key.ToString();
 }
 else
 {
    if (!string.IsNullOrWhiteSpace(LeNumber))
    {
        if (todos.Contains(LeNumber))
        {
            LeNumber = null;
            await SetValueBack("LeNumber");
            await TurnRed("table");
            await Focus("LeNumber");

        }
        else
        {
            if (LeNumber == "submit")
            {
                generateXml();
                b += 1;
            }
            else
            {

                todos.Add(LeNumber);
                LeNumber = null;

                await SetValueBack("LeNumber");
                await TurnNormal("table");
                await Focus("LeNumber");
            }
        }
    }
 }
}

现在的问题是它没有将焦点重新设置在我的输入字段上。要设置我的焦点，我有一个 JS 函数女巫：document.getElementByID(id).focus()。这不起作用，但如果我像下面这样延迟它会起作用：

function focusElement(id) {
 setTimeout(function () {
    document.getElementById(id).focus();
 }, 3000);  
}

我认为它不起作用，因为在显示列表时焦点会丢失：

                    @{
                    for (int i = 0; i < todos.Count; i++)
                    {
                        if (i % 2 == 0)
                        {
                            @:<tr>
                                <td>@todos[i]</td>
                            }
                            else
                            {
                                <td>@todos[i]</td>
                            @:</tr>
                        }
                    }
                }

有没有办法在一切完成后设置焦点？因为延迟这样做会非常“丑陋”

【问题讨论】：

标签： javascript c# blazor

【解决方案1】：

Blazor 对此有一个方法。 FocusAsync().

我相信，如果您在 OnAfterRender 处理程序或您的事件处理程序中调用它，您将实现您想要的。

https://www.youtube.com/watch?v=lLypM7oBwyA

【讨论】：

我尝试将它应用到我的项目中。当我单击主页按钮以路由该页面时，它会聚焦输入字段，但当我打开网站时不会。另外，我的输入字段上仍然没有设置焦点，焦点仍然从输入字段中被盗。
你把它放在OnAfterRender吗？
是的，我做到了。它将字段也集中在刷新上，但不是在我第一次启动它时