Javascript 如何防止移动键盘覆盖html输入

我有一个简单的web应用程序，有一些文本输入，页面底部的输入被iPhone键盘覆盖。这是一种糟糕的用户体验，用户很难看到他们输入的文本，也很难在输入文本后选择页面上的其他元素

苹果在这里记录了这种行为：

我已经看到了一些关于这个问题的帖子，iOS应用程序开发有多种解决方案，但没有真正的web应用程序解决方案

我没有资源在多台设备上测试，也没有安卓设备，所以我不知道这个问题是否发生在那里

---

是否有跨平台的解决方案来检测键盘何时覆盖UI、覆盖了多少UI以及确保输入可见的方法？

您可以在任何单击事件中隐藏键盘。所以，找出什么时候你不想显示键盘，什么时候你真的想显示键盘

因此，一旦确定，您可以隐藏键盘，如：

InputMethodManager manager = getSystemService(INPUT_METHOD_SERVICE);
manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);

---

这个答案是个骗局；但这是我想出的最好的解决办法

在页面底部添加足够大的填充，以便在键盘可见时按需显示内容

使用一些javascript监听器和CSS类，只能在显示键盘时添加此填充

body.keyboard {
    height: calc(100% + 500px); /* add padding for keyboard */
}

// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
    const target = event.target;
    switch (target.tagName) {
        case "INPUT":
        case "TEXTAREA":
        case "SELECT":
            document.body.classList.add("keyboard");
    }
}, true); 
document.body.addEventListener("blur", () => {
    document.body.classList.remove("keyboard");
}, true); 

当输入有焦点时，下面的javascript将添加和删除CSS类，这是我最接近于计算键盘何时显示的

body.keyboard {
    height: calc(100% + 500px); /* add padding for keyboard */
}

// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
    const target = event.target;
    switch (target.tagName) {
        case "INPUT":
        case "TEXTAREA":
        case "SELECT":
            document.body.classList.add("keyboard");
    }
}, true); 
document.body.addEventListener("blur", () => {
    document.body.classList.remove("keyboard");
}, true); 

还值得注意的是，如果输入字体大小小于16px，iOS会执行恼人的缩放，因此这一点也很重要

input {
    font-size: 16px !important;
}

如果您有更好的解决方案，请告诉我。

这个怎么样：

即使没有使用jquery，也可以绑定焦点事件并使用

window.scrollTo（0，document.body.scrollHeight）滚动页面功能，只需滚动到底部。因为有趣的是，创建了空间，但没有滚动到

如果你想去花式，你可以检查窗口大小，以确定是否和多少你想要滚动
 以下是一个可能对您有所帮助的答案：

总之，您可以使用可视视口api并相应地更新下一次渲染。
谢谢Sagar；但是，我觉得这并不能解决我的问题。我希望输入在用户使用键盘时可见，这样他们就可以看到他们输入的文本。谢谢Jeremy。至少对于iOS，它会自动滚动到输入；但是，只有当有足够的空间滚动到它时。所以问题是，如果一个输入靠近页面底部，没有足够的空间向上滚动，它就会被键盘覆盖。有趣的是，这只发生在iOS上，安卓系统工作正常。但是在焦点事件上滚动（就像我的回答中写的那样）在我的应用程序中起作用。