如何避免虚拟键盘与 webview 中的输入字段重叠？

Question

我有一个 Genero Web 应用程序，它显示 Angular 应用程序的 Web 视图。我遇到的问题是，当视图（基于 Chrome v72）获得焦点以允许用户看到他正在输入的内容时，它不会在输入下滚动。

在浏览器中加载页面效果很好，我已经在 Android studio webview 中尝试过了，它也能正常工作。

所以我不知道是否是 Genero 本身导致了问题，或者可能是它呈现视图的某种特定方式、不同的浏览器配置等。

如果您遇到此类问题，无论背景如何，欢迎提出任何想法。我会尝试一切，我想避免必须进行一些修改，在输入下创建空间并手动滚动焦点。

Answer 1

确保您使用 INPUT 语句而不是 DISPLAY 与您的 WEBCOMPONENT 结合使用。 Android https://4js.com/support/issue/?id=GMA-1319 报告了这一点，但同样的原则也适用于 iOS、GBC、GDC

否则，请向您当地的 4J 支持联系人提出案例（假设您正在进行维护）。 过去曾在该领域做过一些工作https://4js.com/support/issue/?id=GMA-920，因此可能需要在该领域进行一些改进。

PS 参考您的开头段落，4Js Genero 有付费支持模式。 矛盾的是，您不会在这里看到很多 4Js Genero 问题，因为这些问题应该 1. 由您当地的支持联系人和 2. 我们的开发者论坛来回答。 这对于我们使用 Stack Overflow 帖子数量等衡量标准的语言流行度衡量来说是不利的。

Answer 2

发生的情况是你的 div 高度没有调整到虚拟键盘。

我建议在构造函数中做这样的事情：

const $resizeEvent = fromEvent(window, 'resize')
       .map(() => {
         return window.innerHeight;
       })
       .debounceTime(20).subscribe(data => {
          this.overflowHeight = `${data}px`;
       });

这将检测调整大小，当键盘出现时它会触发。 然后将高度更改为 div 的新高度。 当它关闭时，它会再次触发并使其恢复正常大小。

在你的html中：

<div [ngStyle]="'height': overflowHeight, 'overflow': 'auto'}" [scrollTop]="scrollHeight"></div>

注意如果您使用子视图，请确保检查周围有多少像素并计算高度 - 像素。

每个输入都需要有一个唯一的id：

<input id={{uniqueId}} (focus)="scrollTo(uniqueId) (scroll)="setScrollHeigth($event)" />

然后你就会：

private scrollTo(_index: any) {
        if (window.screen.width === 360) {
            height = document.getElementById(_index).offsetTop;
            if (height > 0) { this.scrollHeight = height; }
            else if (this.scrollHeigthElm > 0) { this.scrollHeight = 0; }
        }
} 

private setScrollHeigth(_event: any) { 
    this.scrollHeigthElm = _event.srcElement.scrollTop; 
} 

它的作用是检查您的滚动是否高于零并移动它。当你的滚动条为 0 时重置它。

Answer 3

这是一个纯粹的 Genero 问题，据我所知，此后已得到解决。

Answer 4

在 Flutter 中将 resizeToAvoidBottomInset 属性设置为 true