jquery - 键盘覆盖 webapp 中的文本输入(iOS)

Question

我正在开发一个在屏幕下半部分有两个输入字段的网络应用程序。父 View 绝对定位到屏幕。通常，人们会假设在单击输入字段时，焦点会强制将输入显示在键盘上方的 View 中。但是，键盘覆盖了输入字段。

如果我开始输入，该字段中没有输入任何内容。为了在字段中键入内容，我必须先点击下一个箭头，然后再点击上一个箭头(> 转到字段 #2，然后 < 返回字段 1)才能查看输入内容。

我已经尝试调整 View 以具有溢出滚动、相对位置以及在点击时以编程方式设置焦点。这些解决方案均无效。不幸的是，我只能找到与 UITextViews 相关的答案以及具有完全相反问题的人(即不希望它自动滚动。)

Answer 1

任何感兴趣的人的简单解决方案:

在您希望始终可见的输入上注册 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)" />