如何让固定内容超越iOS键盘？

Question

我只能找到人们有相反问题的问题.

我希望我的固定内容超越iOS键盘.问题形象:

我希望iOS的行为像Android一样.

有没有一种简单的方法来实现这一目标？

父元素css:

.parent{
    position:fixed;
    top: 0;
    left 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

按钮css:

.button{
    position:fixed;
    left 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
}

Answer 1

我们可以使用VisualViewport来计算键盘高度。这样我们就可以正确设置固定内容的位置。

小演示：https://whatwg6.github.io/pos-above-keyboard/index.html

Github 仓库：https://github.com/whatwg6/pos-above-keyboard

代码片段：

  const button = document.getElementById("button");
  const input = document.getElementById("input");
  let height = window.visualViewport.height;
  const viewport = window.visualViewport;

  window.addEventListener("scroll", inputBlur);
  window.visualViewport.addEventListener("resize", resizeHandler);

  function inputBlur() {
    input.blur();
  }

  function resizeHandler() {
    if (!/iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
      height = viewport.height;
    }
    button.style.bottom = `${height - viewport.height + 10}px`;
  }

  function blurHandler() {
    button.style.bottom = "10px";
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }

  #button {
    position: fixed;
    width: 100%;
    bottom: 10px;
    background-color: rebeccapurple;
    line-height: 40px;
    text-align: center;
  }

<input
  type="text"
  inputmode="decimal"
  value="0.99"
  id="input"
  onblur="blurHandler()"
/>
<div id="button" onclick="inputBlur()">Button</div>

问题：https ://developers.google.com/web/updates/2017/09/visual-viewport-api#the_event_rate_is_slow

为什么不使用innerHeight？：Iphone safari 无法在键盘打开时调整视口大小

Answer 2

Mobile Safari 不支持位置：已修复当输入聚焦且显示虚拟键盘时。

要强制它以与 Mobile Chrome 相同的方式工作，您必须对整个页面或伪固定元素的容器使用position:absolute、height:100%，拦截滚动、touchend、焦点和模糊事件。

诀窍是在激活焦点之前将点击的输入控件放在屏幕底部。在这种情况下，iOS Safari 总是按可预测的方式滚动视口，并且 window.innerHeight 变为完全可见的高度。

在 Mobile Safari 中打开https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html查看其工作原理。

请避免使用具有多个可聚焦元素的表单，因为需要更多固定位置的技巧，这些技巧只是为了演示目的而添加的。

请注意，对于旋转和横向模式，需要额外的技巧。我正在开发一个名为 Tuff.js 的框架，它将提供一个全屏容器，帮助移动 Web 开发人员更快地构建 Web 应用程序。我花了将近一年的时间进行研究。

顺便说一句，为了防止虚拟键盘处于活动状态时滚动整个窗口，您可以使用这个超级简单的技巧

var hack = document.getElementById('scroll-hack');

function addScrollPixel() {
  if (hack.scrollTop === 0) {
    // element is at the top of its scroll position, so scroll 1 pixel down
    hack.scrollTop = 1;
  }

  if (hack.scrollHeight - hack.scrollTop === hack.clientHeight) {
    // element is at the bottom of its scroll position, so scroll 1 pixel up
    hack.scrollTop -= 1;
  }
}

if (window.addEventListener) {
  // Avoid just launching a function on every scroll event as it could affect performance. 
  // You should add a "debounce" to limit how many times the function is fired
  hack.addEventListener('scroll', addScrollPixel, true);
} else if (window.attachEvent) {
  hack.attachEvent('scroll', addScrollPixel);
}

body {
  margin: 0 auto;
  padding: 10px;
  max-width: 800px;
}

h1>small {
  font-size: 50%;
}

.container {
  display: flex;
  align-items: top;
  justify-content: space-between;
}

.container>div {
  border: #000 1px solid;
  height: 200px;
  overflow: auto;
  width: 48%;
  -webkit-overflow-scrolling: touch;
}

<h1>iOS Scroll Hack</h1>
<p>Elements with overflow:scroll have a slightly irritating behaviour on iOS, where when the contents of the element are scrolled to the top or bottom and another scroll is attempted, the browser window is scrolled instead. I hacked up a fix using minimal,
  native JavaScript.</p>
<p>Both lists have standard scrolling CSS applied (<code>overflow: auto; -webkit-overflow-scrolling: touch;</code>), but the list on the right has the hack applied. You'll notice you can't trigger the browser to scroll whilst attempting to scroll the list
  on the right.</p>
<p>The only very slight drawback to this is the slight "jump" that occurs when at the top or bottom of the list in the hack.</p>
<div class='container'>
  <div id='scroll-orig'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>
  <div id='scroll-hack'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>
</div>

从这里得到这个答案

Answer 3

这是一个众所周知的问题，不幸的是，人们必须诉诸一些技巧，比如目前接受的答案。然而，W3C 正在指定VirtualKeyboard API。

注意：在撰写本文时，该答案尚未准备好进入黄金时段。重要的是要了解该规范还必须具有前瞻性，以适应未来无数可能的虚拟键盘。可靠的跨平台浏览器支持可能需要几年时间才会开始出现，并且这个答案将成为正确的答案。