如何防止iOS键盘使用CSS或JS推送视图关闭屏幕

我有一个响应式网页，可以在您点击一个按钮时打开一个模式。当模式打开时，它被设置为使用固定位置占用页面的全部宽度和高度。模态中还有一个输入字段。如何防止iOS键盘使用CSS或JS推送视图关闭屏幕

在iOS设备上，当输入字段为焦点时，键盘将打开。但是，当它打开时，它实际上将整个文档推到一边，使我的一半页面高于视口顶部。我可以确认实际的html标签本身已被推高以补偿键盘，并且它没有通过CSS或JavaScript发生。

有没有人看过这个之前，如果有，有没有办法来防止它，或重新定位键盘打开后的东西？这是一个问题，因为我需要用户能够看到模式顶部的内容，同时，我想自动对焦输入字段。

来源

2016-07-27 rescuecreative

你看到这一点：http://stackoverflow.com/questions/13820088/how-to-prevent-keyboard-push-up-webview-at-ios-app-using电话 – Iceman

@Iceman不，我没有。我试图寻找类似的问题，但没有找到一个。我会试试看。 – rescuecreative

@rescuecreative。我不确定这是否会有所帮助，因为此解决方案适用于IOS8，因为我在IOS8和Safari上遇到类似问题。 – ankurJos

第一

<script type="text/javascript"> 
$(document).ready(function() { 
    document.ontouchmove = function(e){ 
      e.preventDefault(); 
      } 
});

那么这个

input.onfocus = function() { 
    window.scrollTo(0, 0); 
    document.body.scrollTop = 0; 
}

来源

2016-07-27 18:54:06 ankurJos

谢谢！它完美的作品。顺便说一句，我只使用'document.body.scrollTop = 0'; –

对于input.focus（）在页面加载后发生的IOS8和Safari浏览器bowers行为相同。他们都放大的元素和调出键盘。（不太清楚这是否会成为帮助，但你尝试过使用这样的事情？）

HTML是

<input autofocus>

JS是

for (var i = 0; i < 5; i++) { 
document.write("<br><button onclick='alert(this.innerHTML)'>" + i + "</button>"); 
} 

//document.querySelector('input').focus();

CSS

button { 
width: 300px; 
height: 40px; 
}

你也必须使用一个用户代理的解决方法，你可以用它为所有的IOS版本

if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) { 
element.focus(); 
}

来源

2016-07-27 17:54:49 ankurJos

对不起，也许我不理解。按钮和警报如何提供帮助？ – rescuecreative

@rescuecreative我想我已经理解错了。我在想，也许你正在试图显示虚拟键盘和页面触摸后滚动。 – ankurJos

啊，我明白了。不，我试图阻止虚拟键盘在视口外部推动DOM – rescuecreative

如何防止iOS键盘使用CSS或JS推送视图关闭屏幕

回答

相关问题