Question

如果我的表单大到我需要滚动的话，如果我点击提交后如何将焦点转移到无效字段，它应该转到特定字段，无论它在哪里我都不需要滚动页面来搜索相关的无效字段。

Answer 1

如果您知道表单中的哪个元素无效，您可以通过以下方式给予关注：

$("#element").focus();

要将其滚动到视图中，请使用以下使用Javascript DOM元素的内容。这将没有平滑的滚动方式。：

$("#element").get(0).scrollIntoView();

Answer 2

这几乎肯定是错误的答案，因为它可能不是Angular的做法，但为什么不使用原始的javascript？

然而，诀窍是获得元素。这就是我过去的做法：

在模板中，每个元素都需要一个像这样的引用变量：

<input #myRef ...  />

然后在组件中，您需要使用视图子项：

import { ElementRef, ViewChild } from '@angular/core';

...

export class MyClass {
    @ViewChild('myRef') input: ElementRef;

    myFocusFunction() {
        this.input.nativeElement.focus();
    }
}

这是您关注元素的方法，但您也可以使用它来确定元素的x或y偏移，然后滚动到页面上的正确位置。

就像这样：

let rect = this.input.nativeElement.getBoundingClientRect();

window.scrollTo(rect.top, 0);

如何将焦点设置在不在视野中的字段？

2 个答案: