我正在开发一个在屏幕下半部分有两个输入字段的 web 应用程序。父视图绝对定位在屏幕上。通常，人们会假设单击输入字段时，焦点会强制输入在键盘上方的视图中。但是，键盘覆盖了输入字段。
如果我开始输入，则不会在该字段中输入任何内容。为了在字段中输入，我必须先点击下一个箭头，然后点击上一个箭头（> 转到字段 #2，然后
我尝试调整视图以在点击时进行溢出滚动、相对位置和以编程方式设置焦点。这些解决方案都不起作用。不幸的是，我只能找到与 UITextViews 和有完全相反问题（即不希望它自动滚动）的人相关的答案。
【问题讨论】：
标签： jquery ios web-applications input keyboard
任何感兴趣的人的简单解决方案：
在您希望始终可见的输入上注册onfocus 事件，如下例所示。由于我们不知道键盘何时会完全渲染，因此代码每 300 毫秒执行 5 次（持续时间为 1.5 秒）。您可以根据自己的喜好进行调整。
这个解决方案只有一个需要注意的是它依赖于scollIntoView，这可能不适用于某些旧浏览器（请参阅http://caniuse.com/#search=scrollIntoView）。当然，您可以将其替换为等效算法以达到相同的结果。无论如何，这个简单的解决方案应该会给你这个想法。
var scrolling = function(e, c) {
e.scrollIntoView();
if (c < 5) setTimeout(scrolling, 300, e, c + 1);
};
var ensureVisible = function(e) {
setTimeout(scrolling, 300, e, 0);
};<p>Some text here</p>
<input type="text" value="focus me" onfocus="ensureVisible(this)" />
<p>Some text here</p>
<input type="text" value="select me" onfocus="ensureVisible(this)" />【讨论】：
如果没有简化的代码示例，这很难说，但是您可以尝试在第一个字段上注册一个单击处理程序，然后将第二个字段聚焦在其中，然后再次聚焦第一个字段，在 jQuery 中看起来像这样：
$('#first_field').on('click', function(){
$('#second_field').focus();
$('#first_field').focus();
});
这可能行不通，但值得一试。否则，您将不得不开始弄乱您的 CSS 和定位。不幸的是，在某些情况下，iOS 上的 WebKit 在重新定位和缩放窗口以显示输入字段和键盘时存在问题。
【讨论】：
这里引用了Scrolling to selected element while typing on iphone safari virtual keyboard上类似问题的答案
“好的，所以这可能是你见过的最糟糕的黑客攻击，但它什么都比不上。
您可以做的是动态（使用javascript）将文本框的位置更改为固定位置：固定，这会将文本框的位置更改为相对于浏览器窗口而不是页面。这应该会使 Iphone 的滚动变得无关紧要，并且无论如何您的文本框都应该位于页面顶部。然后 onBlur，将 css 位置再次设置为相对（应该将其放回原位）。
为了使这个更漂亮，您可以在文本框 onFocus 后面放置一个 div，以便隐藏实际的网站内容，并且您可以使用顶部和左侧 css 属性使文本框居中（只要确保也清除那些 onBlur）。"
【讨论】：
这是一个在本机和第三方键盘上都测试正常的解决方案：
$('#foo').on('blur',function(){
setTimeout(function(){
window.scrollTo(0,document.body.clientHeight);
}, 300);
});
$('#foo').on('focus',function(){
setTimeout(function(){
window.scrollTo(0,100000);
}, 300);
});
$('#foo') 是您遇到问题的输入元素，这里的关键是为文档滚动提供 settimeout 延迟。因为我们需要一些时间让 ios 键盘弹出完成以在弹出后获得正确的文档滚动顶部。
【讨论】：