Как установить фокус на поле, которое не видно?

Question

Как я могу перенести фокус на недействительное поле после нажатия на кнопку «Отправить», если моя форма настолько велика, что мне нужно ее прокрутить, она должна перейти к определенному полю, где бы это ни было, мне не нужно прокручивать страницу в поисках релевантного недействительного поле.

Answer 1

Это почти наверняка неправильный ответ, потому что, скорее всего, это не англоязычный способ делать вещи, но почему бы просто не использовать raw 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);

Answer 2

Если вы знаете, какой элемент в форме недействителен, вы можете выделить его следующим образом:

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

Чтобы просмотреть его, используйте следующее, использующее элемент DOM Javascript. Это не будет иметь плавную прокрутку Howveer .:

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