键盘覆盖webapp（iOS）中的文本输入 [英] Keyboard covers text input in webapp ( iOS )

问题描述

我正在开发一个webapp，在屏幕的下半部分有两个输入字段。父视图绝对位于屏幕上。通常，人们会假设在单击输入字段时，焦点会强制输入进入键盘上方的视图。但是，键盘覆盖输入字段。

I am working on a webapp with two input fields in the lower half of the screen. The parent view is positioned absolutely to the screen. Typically, one would assume when clicking the input field, the focus would force the input into view above the keyboard. However, the keyboard is covering the input field.

如果我开始输入，则不会在该字段中输入任何内容。为了输入字段，我必须点击下一个箭头，然后点击前一个箭头（>转到字段＃2然后<返回到字段1）以获取输入以进行查看。

If I start typing, nothing is input into the field. In order to type in the field, I have to hit the next arrow and then the previous arrow (> to go to field #2 then < to go back to field 1) to get the input in to view.

我尝试调整视图以使溢出滚动，相对位置和以编程方式设置焦点。这些解决方案都不起作用。不幸的是，我只能找到与UITextViews相关的答案和那些有完全相反问题的人（即不想让它自动滚动。）

I have tried adjusting the view to have overflow scroll, position relative and programmatically setting focus upon tap. None of these solutions are working. Unfortunately, I can only find answers related to UITextViews and people that have the exact opposite problems (i.e. not wanting it to automatically scroll.)

推荐答案

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

Simple solution for anyone interested:

在您希望始终可见的输入上注册 onfocus 事件以下示例。由于我们不知道键盘何时完全渲染，因此代码每300毫秒执行5次（持续时间为1.5秒）。你可以根据自己的喜好调整它。

Register onfocus event on the inputs you want to be always visible like the example below. As we don't know when the keyboard will be fully rendered, the code is executed for every 300 milliseconds 5 times (duration of 1.5 seconds). You can adjust it to your own taste.

这个解决方案只有一点需要注意，它依赖于 scollIntoView 可能无法在某些旧浏览器上运行（请参阅 http://caniuse.com/#search=scrollIntoView ） 。当然，您可以使用等效算法替换它以获得相同的结果。无论如何，这个简单的解决方案应该给你一个想法。

Only one caveat to this solution is that it relies on scollIntoView which may not work on some old browsers (see http://caniuse.com/#search=scrollIntoView). Of course, you can replace it with an equivalent algorithm to achieve the same result. Anyway, this simple solution should give you the idea.

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)" />

这篇关于键盘覆盖webapp（iOS）中的文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！