键盘覆盖了Web应用程序（iOS）中的文本输入

Question

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

如果我开始打字，则该字段中不会输入任何内容。为了在字段中输入内容，我必须点击下一个箭头，然后点击上一个箭头（> 转到字段 #2，然后 < to go back to field 1) to get the input in to 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)" />

Answer 2

如果没有简化的代码示例，很难说清楚，但您可以尝试在第一个字段上注册一个单击处理程序，然后将第二个字段聚焦在其中，然后再次关注第一个字段，在 jQuery 中，它看起来像这样：

$('#first_field').on('click', function(){
  $('#second_field').focus();
  $('#first_field').focus();
});

这很可能行不通，但值得一试。否则你将不得不开始搞乱你的 CSS 和定位。不幸的是，在某些情况下，iOS 上的 WebKit 在重新定位和缩放窗口以显示输入字段和键盘时会出现错误。

Answer 3

这里引用了类似问题的答案，网址为 Scrolling to selected element whiletyping on iphone safari virtual Keyboard

“好吧，这可能是你见过的最糟糕的黑客攻击，但它胜过任何事情。

您可以做的是将文本框的位置动态（使用javascript）更改为固定位置：固定，这会将文本框的位置更改为相对于浏览器窗口而不是页面。这应该会使 Iphone 的滚动变得无关紧要，并且无论如何，您的文本框都应该位于页面顶部。然后 onBlur，CSS 位置再次设置为相对（这应该将其放回到原来的位置）。

为了使这个更漂亮，您可以在 onFocus 文本框后面放置一个 div，以便隐藏实际的网站内容，并且您可以使用顶部和左侧 css 属性将文本框居中（只需确保也清除这些 onBlur）。”

Answer 4

这是一个对于本机和第三方键盘都测试良好的解决方案：

    $('#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 键盘弹出完成，以便在弹出后获得正确的文档滚动顶部。

Answer 5

我为这个问题苦苦挣扎了 8 个多小时，并试图避免自己提高输入字段之类的解决方案。我解决了这个问题，将自动对焦设置为true，但对于android将其设置为false。

textarea

判断设备是否为IOS。 我的标记：getIOSdevice