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

l2osamch 于 2022-12-06 发布在 Go

关注(0)|答案(3)|浏览(107)

我只能找到人们有相反问题的问题。
我希望我的固定内容在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;
}

google-chrome

来源：https://stackoverflow.com/questions/43833049/how-to-make-fixed-content-go-above-ios-keyboard

3条答案

按热度按时间

a5g8bdjr1#

移动电话上的Safari不支持定位：已修复聚焦输入并显示虚拟键盘时的问题。
要强制它以与移动的Chrome相同的方式工作，您必须使用position：绝对高度：100%用于整个页面或伪固定元素的容器，拦截滚动、触摸结束、焦点和模糊事件。
诀窍是在激活焦点之前将点击的输入控件放在屏幕底部。在这种情况下，iOS Safari总是按预期滚动视口，window.innerHeight会变成完全可见的高度。
在移动电话上的Safari中打开https://avesus.github.io/docs/ios-keep-fixed-on-input-focus.html以查看其工作原理。
请避免使用具有多个可聚焦元素的窗体，因为需要更多的技巧来固定位置，这些只是为了演示目的而添加的。
请注意，对于旋转和横向模式，需要额外的技巧。我正在开发一个名为Tuff.js的框架，它将提供一个全屏容器，帮助移动的Web开发人员更快地构建Web应用程序。我花了将近一年的时间进行这项研究。
顺便说一下，为了防止整个窗口滚动时，虚拟键盘是活动的，你可以使用这个超级简单的技巧
第一个
从here获得此答案

赞(0）回复(0）举报 2022-12-06

mwg9r5ms2#

We can use VisualViewport to calculate keyboard height. So we can set fixed-content pos correct.
Small demo: https://whatwg6.github.io/pos-above-keyboard/index.html
Code snippet:

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

window.addEventListener("scroll", () => input.blur());
window.visualViewport.addEventListener("resize", resizeHandler);

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">Button</div>

Problems: https://developers.google.com/web/updates/2017/09/visual-viewport-api#the_event_rate_is_slow
Why not innerHeight?: Iphone safari not resizing viewport on keyboard open

赞(0）回复(0）举报 2022-12-06

kokeuurv3#

这是一个众所周知的问题，不幸的是，人们必须求助于像现在公认的答案那样的黑客技巧。
注意：在撰写本文时，这个答案还没有 * 准备好 *。重要的是要理解，这个规范也必须是前瞻性的，以适应未来无数可能的虚拟键盘。可能需要几年的时间才能出现可靠的跨平台浏览器支持，这个答案才是正确的。

赞(0）回复(0）举报 2022-12-06