时间戳

首页 > 解决方案 > 强制输入始终在具有动态高度的页面中的视口中

javascript - 强制输入始终在具有动态高度的页面中的视口中

问题描述

我的网站有一个表格，当您输入内容时，它会在表格上方添加错误。当您在大屏幕桌面上执行此操作时，即使将输入移到底部，您仍然可以看到输入。但是，当您使用手机时，可能会出现很多错误并且输入会超出屏幕。

这就是问题所在：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;
  }
}

你有什么想法来解决这个问题吗？也许有人有其他方法来解决这个问题（不幸的是无法删除该机制）。

标签： javascriptangularscroll

解决方案

与其监听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/

推荐阅读