Question

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

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

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

Answer 1

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

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

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

＆＃13;

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);
};

＆＃13;

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

＆＃13;

Answer 2

以下是对Scrolling to selected element while typing on iphone safari virtual keyboard

中类似问题的回答的引用

“好的，所以这可能是你见过的最糟糕的黑客攻击，但它什么也没有。”

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

为了使这个更漂亮，你可以在文本框onFocus后面放置一个div，这样它就会隐藏实际的网站内容，你可以使用top和left css属性将文本框置于中心（只需确保清除那些onBlur）。“< / p>

Answer 3

如果没有简化的代码示例，很难说，但是你可以尝试在第一个字段上注册一个click处理程序，然后将第二个字段集中在其中，然后再将第一个字段集中在jQuery中看起来像这样：

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

这可能会失败，但值得一试。否则你将不得不开始搞乱你的CSS和定位。不幸的是，在某些情况下，iOS上的WebKit在重新定位和缩放窗口以显示输入字段和键盘方面存在问题。

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键盘弹出窗口完成，才能在弹出窗口后使正确的文档滚动到顶部。

键盘覆盖webapp（iOS）中的文本输入

4 个答案: