渐进式Web应用程序软键盘和导航栏在全屏中重叠

Question

更新：好的。因此，这看起来像是另一个错误。我在chromium.org上发现了一些票，说明基本相同的问题。在他们的情况下，他们将其显示为滚动问题，因为作为Web应用程序，它不会在输入焦点和IME弹出窗口上调整视口的大小，因此他们无法向下滚动到低于IME的输入字段，并且不会自动向上滚动。我的不使用普通的输入字段（尽管xterm.js 实际上使用了一个，但您永远都看不到它），但是原因和结果是一样的：当IME弹出时，视口不会调整大小，因此也不会触发调整大小事件。门票摘录：

请注意，我不确定我们是否要使屏幕键盘特别好，甚至完全不使用全屏API，因为这主要用于视频和全屏游戏。支持出于某种原因使用全屏API的“常规网站”的优先级较低。

票证中的工程师认为，尽管从2015年到现在的工作中一直存在投诉，但是这被认为是极低的优先级。显然没有计划解决上述问题，尤其是由于Firefox具有相同的错误。

因此，我的结论是解决该问题的唯一现实方法是，如果希望全屏显示，则包括一个内置的HTML5 OSK。很好，因为我已经在进行这项工作。由于它是一个终端仿真器（有点类似于Android的Termux），因此需要完整的101个键盘支持。目前，我使用的Hackers Keyboard效果很好，并将PWA的“显示”设置为“独立”（我不确定它是否可以作为“即时应用”使用，但确实可以通过Chrome或Android浏览器。仍然是Chrome）。

如果周围有黑客可以让用户使用其本机IME并适当调整视口大小，那么我很乐意听到，也可以从帖子中看到其他人也可以。我要保留这张票，以便具有相同问题的开发人员不要将时间和精力浪费在不支持的事情上，希望有人能找到解决方法。就我自己而言，我将继续使用所述的内置HTML5 OSK。

对于那些感兴趣的人，您可以在这里和这里参考票。

---

以前：我有一个网络应用程序已经使用了一段时间了。这是一个基于Web的专业终端，使用xterm.js作为客户端的基础。自从移植到全屏PWA以来，我一直在“独立”中使用它。在移动设备上，对于这样的应用程序来说，屏幕不动产非常珍贵，因此全屏显示非常理想-如果我可以消除以下障碍：

1. Android上的IME（软键盘）与应用重叠，而不是调整视口的大小，从而使其无法在全屏模式下使用。

2. 弹出IME时，导航栏图标与应用程序顶部重叠，这是不希望的，因为全屏的整个要点是声称只有一英寸的小数，它可能是终端中的文本的另一行或两行。

我敢肯定，第一个解决方案是可以解决的，但是我尝试过的任何方法都没有运气。第二，我不太确定。

我计划实施一个自定义的内部IME，可以解决此问题，但还只是完成了一半，我希望用户仍然可以选择使用设备上本机安装的IME。

想法，有人吗？

另外，如果有办法可以计算出软键盘的高度差，我可以只在焦点事件中在脚本中设置高度，但是我不确定该怎么做，因为它已经有了处理程序来调整font-size / cols / rows监听resize事件，这就是为什么在这种情况下它可以正常工作的原因。

更多信息：

它可以正确安装到应用程序抽屉中，提示安装，已注册服务工作人员等。如果我在清单中设置了“ display”：“ standalone”，则当IME弹出或隐藏时，它可以正确调整大小，但是在设置时不会调整大小“ display”：“全屏”。它有一个很好的包装，带有所有推荐的PWA的口哨声。该应用程序包装在iframe中。只要iframe更改了IME的大小，其余的都会随之变化。

我尝试了固定位置和绝对位置，高度100％和100vh，并尝试在身上设置各种组合。我本来希望它能正常工作。

不久之前，在将其设置为PWA之前，我已经插入了一个使其全屏显示的功能，并且可以为IME调整大小。唯一的问题是导航栏上的图标与应用程序顶部重叠（如果我没记错的话，当IME隐藏时，它们并没有消失，尽管它们现在作为PWA使用了）。

在这种情况下，独立模式和全屏模式之间的唯一真正区别是在独立模式下，应用程序的顶部停在导航栏上。差异不大，但意义重大，因为在手机上横向放置整整一两行，具体取决于用户将字体设置为多大（字体会自动调整大小，以及行/行的数量）。调整大小事件时，通过+/-图形控件在终端中输入文本）。

这是iframe：

<iframe src=1ndex.html style="
  position: fixed;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  outline: none;  border: none;
"></iframe>

我不认为meta视口标记很重要，但是在这里。浏览器页面缩放不应该继续进行。它是一个终端客户端，具有显式的GUI控件来更改字体大小和相应的行数/列数以适合iframe。无论如何，无论是在清单中设置的“全屏”之外，还是在浏览器镶边，“添加到主页”（在添加到PWA的端口之前）等任何其他方式下，它都可以正常工作。以显示为“全屏”的PWA的形式安装到应用程序抽屉中（但在PWA移转之前通过js设置为全屏显示时则不是）。

<meta id=viewport name=viewport
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
>

这是清单的稍作修改的副本，可用于全屏显示：

{
  "name": "asdf",
  "short_name": "asdf",
  "description": "asdf,
  "scope":"/asdf/",
  "start_url": "https://asdf.com/asdf/index.html",
  "display": "fullscreen",
  "background_color": "#000",
  "theme_color": "#000",
  "icons": [{
    "src": "/asdf/favicon.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

那是一个问题。至于存在IME时导航栏图标悬停在应用程序上方的情况，除非解决方法相同，我什至不知道从哪里开始。我所有的搜索字词都是通常的教程页面，其中讨论了如何设置PWA或称其为PWA。

我必须说，我有点震惊，行为是不同的，因为我认为它将默认为相同的行为。仅仅因为该应用程序是全屏的，并不意味着您希望IME与您的应用程序底部重叠。无论如何，如果有解决方法，那可能很简单，但并不那么明显。

Answer 1

如上所述，这是一个公认的错误，没有修复计划。如果您确实需要或希望您的应用程序在没有 OSK/IME 覆盖应用程序部分的情况下获得软键盘输入，您可以通过一点 DIY OSK 来解决这个问题。这真的很简单（嗯，大部分）。如果您的用例与我的一样，那就更容易了：您可以直接将字符发送到 websocket。假设您的 websocket 对象称为“socket”，软键将如下所示：

<button onclick="socket.send(this.innerHTML)">A</button>

特殊键（例如 Escape）需要发送“转义字符代码”，例如：

<button onclick='socket.send("\x1b")'>ESC</button>

--或 \033、\u001b 等，而不是 \x1b。全部功能相同。

注意单引号和双引号的颠倒。由于 HTML5 允许这样做，因此比使用反斜杠“转义”函数内的引号更容易。

如果用于基于 Web 的终端模拟器，某些键（例如箭头键）将需要终端“转义码”。此代码取决于术语类型。对于 xterm，它通常是“\x1bO]A”，或 B、C 或 D，具体取决于方向。VT100 是相同的，但省略 O。您可能必须检查 termcap/terminfo 数据库或环境变量字符串才能确定，具体取决于系统。

您可以通过复制小写或大写键盘（无论您先创建哪个）来模拟 Shift 或 Capslock，然后用它们的变体替换字母，本质上是制作一个单独的键盘。将每个键盘包装在一个 div 中，然后使用样式，"position: absolute; left: 0px; top: 0px;" 然后将两个键盘包装在另一个 div 中。将 onclick 处理程序附加到每个键盘上的 Shift 键 - 在最上面的键盘上使用处理程序将其隐藏。在底部键盘中，使用它再次显示顶部键盘。实际上，这与本机输入法上的 Shift 键非常相似。

如果您的目标是传统的输入文本或文本区域，请使用以下模式：

document.getElementById('myinputelementid').value += 'A';

或您的密钥处理程序中的等效项。您确实应该首先永久地“获取”输入，然后引用它，而不是每次都获取它，但两者都可以。

对于传统的文本区域/输入，您必须以不同的方式处理箭头、胡萝卜（光标）位置和退格键。我的用例是 xterm.js，它将通过终端转义序列处理实际的退格字符、箭头键等。如果您需要使用传统输入，我将让您自行查找这些操作的既定 DOM 方法。另一方面，您也许能够找到适合您需求的预制开源 OSK。如果您使用 node.js，我在 npm 网站上看到过一个，虽然我不能肯定地说它可以做到所有这些，但我认为它可以。您可以通过谷歌搜索“npm osk”找到它，或者直接在 npm 中搜索“osk”。

另一件事是，您需要防止输入（包括 xterm.js）获得点击/触摸的焦点，否则本机 IME 将弹出并妨碍。实现此目的的一种方法是在“prevent.default”的输入上使用单击和 touchstart 处理程序。这对于 xterm.js 很有用（我不记得隐藏输入的 id，但您可以使用开发工具找到它）。对于传统输入，您可能只需用透明 div 覆盖它即可。不过，您可能想伪造一个光标，因为您将避免实际焦点，因此它不会显示。有一些很好的网站介绍了如何执行此操作。不过，我在这里只是介绍了基础知识，主要是针对 xterm.js 用例，它无论如何都会显示一个光标，您只需重新设置它的样式，使其成为实体而不是轮廓。

如果这在技术上没有涵盖整个解决方法，我深表歉意，但它确实涵盖了您需要的大部分内容，并且让您知道如何完成它（如果您选择走这条路）。我并不是说这一切都很容易。但大部分都是这样。

其他选项是：仅使用足够小且足够高的输入，以便本机 IME 无法与它们重叠，或者将它们嵌套在足够大的内容中，无论如何都可以向上滚动（可能很混乱），或者只是不使用全屏 - 使用改为“显示”：“独立”。

也许如果有足够多的开发人员给他们带来麻烦，供应商就会修复它。因此，如果您不喜欢这个问题，我建议您查看上面链接中指出的错误报告，并在报告中表达您的问题。它相当古老，并且有一个从几年前到现在的帖子列表。

祝你好运！