Принудительно вводить данные всегда в области просмотра на странице с динамической высотой

Question

Мой веб-сайт получил форму, которая при вводе чего-либо добавляет ошибку над формой. Когда вы делаете это на рабочем столе с большим экраном, вы все равно можете видеть вход, даже если он был немного перемещен вниз. Однако, когда вы используете мобильный телефон, существует вероятность, что, когда будет много ошибок, и ввод будет выходить за пределы экрана.

Это проблема: https://angular -wwvhcw.stackblitz.io

Я попытался связать событие ввода, и когда событие ввода произойдет, я прокручиву документ до положения, в котором ввод будет фактически в той же позиции.

Это мой код (я использую Angular):

@Directive({
  selector: '[appAnchorInput]'
})
export class AnchorInputDirective {

  input: HTMLInputElement;

  @HostListener('input') onInput() {
    const position: DOMRect = this.el.nativeElement.getBoundingClientRect();
    const pos = Math.abs(this.input.scrollTop - position.y); // can't figure equation to calculate proper scroll 
    this.viewportScroller.scrollToPosition([0, pos]);
  }

  constructor(private el: ElementRef, private viewportScroller: ViewportScroller) {
    this.input = el.nativeElement;
  }
}

Есть ли у вас какие-либо идеи, чтобы решить эту проблему? Может быть, у кого-то есть другой способ решить эту проблему (к сожалению, он не может удалить этот механизм).

Answer 1

Вместо прослушивания события input, прослушайте событие keyup и затем вызовите scrollIntoView() для целевого элемента, если он не виден в области просмотра.

HTML:

<input [(ngModel)]="value" (keyup)="handleKeyup($event)" id="dupa">

Контроллер:

handleKeyup($event) {
  if (this.isInViewport($event.target)) {
    console.log("visible")
  } else {
    console.log("not visible")
    $event.target.scrollIntoView();
  }
}

isInViewport(elem) {
  var bounding = elem.getBoundingClientRect();
  return (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

Я разбудил ваш StackBlitz и обновил его, чтобы он работал для меня: https://stackblitz.com/edit/angular-1sfnjj

Источник: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/