Question

我尝试在屏幕上显示焦点输入。我想将输入字段放在手机键盘上方。我现在所做的是根据焦点编辑我的高度并将其设置为模糊（不重要）。在这个高度我希望输入可见，所以它不会隐藏在移动键盘下面。如果输入已经在高度内，它将什么都不做。

这是我的HTML：

<div *ngIf="form" [ngStyle]="{'height': elmtHeight}">
   <div class="inner-add-edit" (scroll)="scroll($event)">
   <form [formGroup]="form">
      <div formArrayName="array" [ngStyle]="{'padding-bottom': paddingHeight}">
      <div *ngFor="let item of form.controls.array.controls; let i = index; trackBy: trackByIndex">
      <span *ngIf="item.value.datatype === '8'">
        <input type="checkbox" id={{item.value.fieldID}} formControlName="view" class="form-control, input" (focus)="scrollTo(item.value.fieldID, $event)"/>
      </span>
      <span *ngIf="item.value.datatype === '1'">
         <input type="number" id={{item.value.fieldID}} formControlName="view" class="form-control, input" (focus)="scrollTo(item.value.fieldID, $event)" />
      </span>

根据数据类型，我显示了不同的字段，但最重要的是(focus)="scrollTo(item.value.fieldID, $event)" 这将打电话：

private scrollTo(_index: any, _event: any) {
        if (window.screen.width === 360) { // phone
            let heigth = _event.srcElement.offsetTop;
            if (this.scrollHeight !== undefined) { // height of the scroll
                heigth = _event.srcElement.offsetTop - this.scrollHeight;
            }
            this.elmtHeight = `250px`;
            this.paddingHeight = `200px`; // padding to let the items scroll up
            if (heigth > 250) {
                let elm = document.getElementById(_index);
                //let scroll = _event.srcElement.offsetTop - (250 + (heigth - _event.srcElement.offsetTop));
                //elm.scrollTo(0, scroll);
                elm.scrollIntoView();

后来我尝试添加容器ID并计算偏移量。但这并未显示底层输入。

let heightElmt = document.getElementById(_id).offsetTop;
let elm = document.getElementById('container');
let newHeight = _index * 22;
elm.scrollTop = newHeight;

我真的很想在这里得到一些帮助。

儿童反应形式输入scrollIntoView与焦点

0 个答案: