Javascript 如何防止 iOS 键盘使用 CSS 或 JS 将视图推离屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38619762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent iOS keyboard from pushing the view off screen with CSS or JS
提问by rescuecreative
I have a responsive web page that opens a modal when you tap a button. When the modal opens, it is set to take up the full width and height of the page using fixed positioning. The modal also has an input field in it.
我有一个响应式网页，当您点击按钮时会打开一个模式。当模态打开时，它被设置为使用固定定位占据页面的整个宽度和高度。模态也有一个输入字段。
On iOS devices, when the input field is focused, the keyboard opens. However, when it opens, it actually pushes the full document up out of the way such that half of my page goes above the top of the viewport. I can confirm that the actual htmltag itself has been pushed up to compensate for the keyboard and that it has not happened via CSS or JavaScript.
在 iOS 设备上，当输入字段获得焦点时，键盘会打开。但是，当它打开时，它实际上会将整个文档向上推开，这样我的页面的一半就会超出视口的顶部。我可以确认实际html标签本身已被向上推以补偿键盘，并且它没有通过 CSS 或 JavaScript 发生。
Has anyone seen this before and, if so, is there a way to prevent it, or reposition things after the keyboard has opened? It's a problem because I need users to be able to see content at the top of the modal while, simultaneously, I'd like to auto-focus the input field.
有没有人以前见过这个，如果是，有没有办法防止它，或者在键盘打开后重新定位？这是一个问题，因为我需要用户能够在模态顶部看到内容，同时，我想自动聚焦输入字段。
采纳答案by ankurJos
first
第一的
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
then this
那么这个
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
回答by lewislbr
For anyone stumbling into this in React, I've managed to fix it adapting @ankurJos solution like this:
对于任何在 React 中遇到这个问题的人，我已经设法通过调整 @ankurJos 解决方案来修复它，如下所示：
const inputElement = useRef(null);
useEffect(() => {
inputElement.current.onfocus = () => {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
};
});
<input ref={inputElement} />
回答by Otani Shuzo
you could also do this if you don't want scrollTo the top(0, 0)
如果你不想 scrollTo the top(0, 0) 你也可以这样做
window.scrollBy(0, 0)
回答by malthe
In some situations this issue can be mitigated by re-focusing the input element.
在某些情况下，可以通过重新聚焦输入元素来缓解此问题。
input.onfocus = function () {
this.blur();
this.focus();
}
回答by ankurJos
Both IOS8 and Safari bowsers behave the same for input.focus() occuring after page load. They both zoom to the element and bring up the keyboard.(Not too sure if this will be help but have you tried using something like this?)
IOS8 和 Safari 浏览器对页面加载后出现的 input.focus() 的行为相同。它们都缩放到元素并调出键盘。（不太确定这是否会有所帮助，但您是否尝试过使用这样的东西？）
HTML IS
HTML 是
<input autofocus>
JS is
JS是
for (var i = 0; i < 5; i++) {
document.write("<br><button onclick='alert(this.innerHTML)'>" + i + "</button>");
}
//document.querySelector('input').focus();
CSS
CSS
button {
width: 300px;
height: 40px;
}
ALso you will have to use a user-agent workaround, you can use it for all IOS versions
此外，您必须使用用户代理解决方法，您可以将其用于所有 IOS 版本
if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
element.focus();
}
