虚拟键盘在 webview 中重叠输入

Question

我不确定是否有人能够提供帮助，因为我遇到了 Genero 的这个问题，我非常不受欢迎，但我会接受你们可能有的任何一般想法。

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

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

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

如果您遇到过此类问题，欢迎提出所有想法，无论上下文如何，我都会尝试一切，我想避免在输入并手动滚动焦点。

Answer 1

这是因为您的身高 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 2

确保您使用的是 INPUT 语句而不是 DISPLAY 与您的 WEBCOMPONENT 结合使用。这是用 Android https://4js.com/support/issue/?id=GMA-1319 报告的，但同样的主体可以应用 iOS、GBC、GDC

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

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

Answer 3

好吧，这似乎更像是一个 Genero 问题，它处理网络视图的方式是将虚拟键盘放在网络内容上，而不是在其中。我们把它带到了他们的论坛，他们正在调查它。

Answer 4

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

虚拟键盘在 webview 中重叠输入

Virtual keyboard overlapping input in webview

html

android

genero

4js

angular