Blazor：EditForm.Model 更改后如何保持对输入的关注答案

【问题标题】：Blazor: How to keep focus on an input after EditForm.Model changesBlazor：EditForm.Model 更改后如何保持对输入的关注
【发布时间】：2021-11-02 21:05:01
【问题描述】：

EditForm 元素在模型更改时重新呈现它的子内容。作为副作用，活动（聚焦）输入元素会从 DOM 中移除并且焦点会丢失。

<EditForm Model="model">
    <!-- Focus will not be retained when model changes  -->
    <InputText @bind-Value="model.Name" /> 
    ...dozen of other inputs
</EditForm>

查看演示：https://blazorrepl.com/repl/mbbEcJaB56u8TmG400

当 EditForm 被重新渲染时，我希望将焦点保留在同一个输入上 - 无论输入有焦点。

如何在重新呈现 EditForm 时保持对同一输入的关注？

理想情况下，我应该有一个通用的解决方案，因为我的项目中有许多表单和许多不同的输入

编辑：我知道如何通过使用ElementRef.Focus() 或JS 以编程方式将焦点设置到元素。

这个问题是关于保持对用户关注的任何输入的关注。

【问题讨论】：

Blazor 有一个用于元素的FocusAsync 方法（使用@ref）。您还可以随时使用 JavaScript 互操作来调用对元素的关注。
stackoverflow.com/questions/60309188/…

标签： c# blazor

【解决方案1】：

您甚至在提出问题之前就回答了自己的问题。

活动的（聚焦的）输入元素从 DOM 中移除并失去焦点。

如何在重新呈现 EditForm 时保持对同一输入的关注？

你看到了吗？你不能。您能做的最好的事情就是将注意力集中在新元素上。

一般方法是使用上面 cmets 中提供的工具跟踪最近关注的输入，并根据需要将焦点恢复到该输入的新版本。

【讨论】：

谢谢。您准确地描述了我想要实现的目标 - 聚焦在逻辑上表示相同输入的新 DOM 元素。你只是没有展示如何。这是一项艰巨的任务。

【解决方案2】：

直到有人提出更好的解决方案，以下对我有用：

//restore focus after EditForm.Model changes, since the elements are removed from DOM 

//when active element is removed from DOM, `focusout` event bubbles up to document
document.addEventListener('focusout', (evt) => {
    if (evt.target.form && evt.target.form.parentElement) {

        //parent of the EditForm will stay connected to DOM.
        const parent = evt.target.form.parentElement; //get editform's

        let elementSelector = evt.target.tagName;
        if (evt.target.name) {
            elementSelector += `[name='${evt.target.name}']`;
        }
        //we will need this to find new version of element after DOM updates
        const elementPosition = [...parent.querySelectorAll(elementSelector)].indexOf(evt.target);

        setTimeout(() => {  //wait for rerender
            // check whether the original active element was removed from DOM
            if (document.activeElement == document.body && !evt.target.isConnected) {
                const rerenderedElement = parent.querySelectorAll(elementSelector)[elementPosition];

                if (rerenderedElement) {
                    rerenderedElement.focus();
                }

            }
        }, 1);
    }
});

【讨论】：